A cor do texto em CSS é definida usando a propriedade color. Mas há maneiras de usar algo mais complexo do que apenas uma cor? Dá sim, é só olhar para o título deste post. O texto nele, ao invés de ter uma cor apenas, é preenchido por um degradê (ou gradiente). Vamos fazer isso só com CSS!

Um comportamento que de vez em quando me pega desprevinido de CSS é o margin collapsing (literalmente, "desmoronamento das margens", na falta de uma tradução melhor), que é a combinação de duas margens adjacentes em uma só. É algo que faz parte da especificação mas muitas vezes passa despercebido. Agora, quando isso interfere no que queremos fazer, se você não souber o que é e como funciona, vai quebrar a cabeça para desvendar por que suas margens desaparecem. Trouxe a definição de em quais casos suas margens podem sumir e alguns exemplos para ajudar a visualizar cada um!

Quase todo sistema operacional hoje vem com suporte a definir um nível de "brilho" da interface, que geralmente tem dois valores: claro e escuro (light ou dark). As implementações modernas de CSS incluem suporte a verificar qual a preferência do usuário, se houver, e adaptar sua interface de acordo. Vamos implementar um modo noturno com CSS, usando CSS variables para deixar o código mais escalável e menos repetitivo!

CSS é uma parada poderosa. Apesar de, originalmente, servir para suportar o HTML e definir estilos para itens em um documento, a comunidade de desenvolvimento front-end mostrou que dá para fazer muito mais que isso e cria verdadeiras experiências com CSS, substituindo ferramentas de animação e imagens por linhas de código de folha de estilos. Juntando isso com o dinamismo de JavaScript, dá para criar interações bem legais diretamente na web, muitas vezes sem assets extra além do próprio código.

Esse post é um experimento para criar algo que não é novo, mas que é divertido e mostra algumas das capacidades de criar animações interativas com CSS e JS. Minha ideia é tentar fazer uma animação para acompanhar um formulário de login sem usar imagens ou outros recursos além de HTML, CSS e JS. Eu não sou um artista então não espere uma obra de arte. A ideia é, com pouco código, fazer um efeito que fique legal.

Na era do CSS moderno, eu falar em animações feitas com JavaScript pode fazer você achar que estou desenterrando cadáveres. Com o CSS atual, a vida de quem quer fazer animações bonitas e rápidas melhorou bastante. Infelizmente, nem tudo dá para animar com CSS ainda, e algumas coisas precisam ser feitas na mão, via JavaScript.