Texto com degradê em CSS (igual a esse título)

Publicado em 16 set 2020. Uns 4 minutos de leitura.

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!

Continuar lendo ‚Üí


Desmistificando o margin collapsing do CSS

Publicado em 3 ago 2020. Uns 11 minutos de leitura.

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!

Continuar lendo ‚Üí


Modo noturno com CSS variables

Publicado em 16 jul 2020. Uns 5 minutos de leitura.

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!

Continuar lendo ‚Üí


Animando um personagem com CSS e JavaScript

Publicado em 10 jul 2020. Uns 10 minutos de leitura.

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.

Continuar lendo ‚Üí