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.