Alguns links sobre gradientes CSS

De vez em quando, o zeitgiest do blog parece se unir em torno de um determinado tópico e é como se os artigos salvos na minha pasta de favoritos estivessem conversando. A conversa que está acontecendo agora é sobre gradientes CSS e pensei em vincular algumas das peças mais interessantes.

• Dia 22: gradientes cônicos — Manuel Matuzovic analisou gradientes cônicos no dia 21 de sua série de 100 dias sobre CSS moderno, fornecendo uma bela visão de alto nível de cores, ângulos, posicionamento e limites de cores. Em seguida dia 22, ele coloca-o em uso no ::backdrop pseudo-elemento. (A propósito, o Twitter inesperadamente suspendeu a conta dele — vamos ajudar a consertar esse navio, se pudermos.)
• Você realmente entende os gradientes radiais CSS? - Patrick Brosset fez um trabalho digno de guia aqui e, honestamente, ainda estou trabalhando nisso. Mas já aprecio suas explicações claras e demonstrações de coisas que ainda estrago, como palavras-chave para o tamanho e a forma de um gradiente radial. Já estou vinculando isso em nosso próprio Guia de gradientes CSS!
• Gradientes de fundo altamente personalizáveis — Ei, falando em gradiente radial, Scott VandeheyA receita de um com múltiplas paradas de cores circulou na semana passada. Seu desafio era criar um padrão de gradiente que pudesse suportar diferentes variações de cores, o que normalmente seria uma bagunça de classes CSS e valores de cores para cada variação se não fosse pelo uso propriedades personalizadas. Dessa forma, ele pode atribuir uma propriedade customizada para as diferentes cores e valores de posicionamento para cada parada de cor e, em seguida, simplesmente atualizar os valores dependendo do contexto. E o que é mais importante é que a forma como as propriedades personalizadas podem ser atualizadas com JavaScript permitiu que Scott construir uma ferramenta para personalizar seu padrão de gradiente, que é generosamente compartilhado no final da postagem.
• Padrões de meio-tom CSS - Michelle Barker com uma análise detalhada dos padrões de “meio-tom” de Ana Tudor. O efeito é mais ou menos como a impressão pontilhada dos jornais da velha escola. Enquanto Ana usa Houdini nos bastidores da animação e dos efeitos de foco, Michelle analisa especificamente o próprio efeito de meio-tom e como ele é construído com um gradiente radial. Adoro especialmente a maneira como Michelle mostra como passar de uma grade simples de pontos para uma onde o padrão é um pouco escalonado. E fique até o final para ver como ela pontua o efeito com um mask-image que usa um gradiente linear para criar um efeito de desbotamento. Eu mexi um pouco nesse padrão, também, e acabei com algo bacana que parece um filtro de tinta escorrendo.
• Uma solução arrojada de barra de navegação — Eric Meyer recebeu um interessante desafio de design para um menu onde uma linha pontilhada sai do link “página atual” e se torna parte de uma borda pontilhada maior ao longo da borda esquerda do contêiner de conteúdo. Eric é sempre um grande exemplo de como pensar como um desenvolvedor front-end, e ele faz isso aqui ao descrever a rota alternativa que ele seguiu usando um gradiente linear quando encontrou um obstáculo com a abordagem padrão de configuração border-style: dotted no elemento.
• Linhas tracejadas de gradiente mascarado - Eric com uma continuação do último link mostrando não apenas como ele conectou os traços de uma borda esquerda aos traços de uma imagem raster, mas como seu olhar perspicaz de design o convenceu a mudar sua solução para imitar a resolução mais baixa do traços da imagem usando dois gradientes de fundo lineares repetidos como mask-image no gradiente de fundo. Tão nerd e ótimo!