CSS e web
Gradientes CSS, SVG, Tailwind e fundos web rápidos e bonitos.
200 guias · 11 temas
CSS e webGradiente linear em CSS: guia completo do linear-gradient()
7 min de leitura
Cada parte do linear-gradient() explicada com um exemplo ao vivo ao lado do código, da direção predefinida às paragens duras, aos brilhos sobrepostos e às misturas OKLCH mais suaves.
CSS e webGradiente radial em CSS: formas, tamanhos e posições
5 min de leitura
O radial-gradient() desenha a cor a partir de um ponto para fora. Aqui está cada parte dele, com exemplos ao vivo, e os truques de camadas por trás de brilhos suaves, focos de luz e vinhetas.
CSS e webGradiente cónico em CSS: círculos, gráficos circulares e brilho
5 min de leitura
O conic-gradient() varre a cor à volta de um ponto como o ponteiro de um relógio. Essa ideia desenha círculos cromáticos, gráficos circulares, gráficos em anel, brilho metálico e explosões de raios.
CSS e webGradiente de malha em CSS: como o criar com camadas radiais
6 min de leitura
Não há mesh-gradient() em CSS. Eis o método de camadas que imita um de forma convincente, o desfocado e o grão que o acabam e quando uma imagem ou um shader é a melhor opção.
CSS e webTexto com gradiente em CSS, bem feito
6 min de leitura
Três linhas de CSS põem um gradiente dentro das tuas letras. Torná-lo legível, robusto e de bom gosto exige mais algumas, e saber quando deixar o texto liso.
CSS e webBorda com gradiente em CSS: quatro formas de a desenhar
5 min de leitura
O border-color não aceita um gradiente, por isso todo o contorno com gradiente é um contorno de recurso. Eis os quatro que importam, o que cada um pode e não pode fazer e a qual recorrer.
CSS e webFundos com gradiente animado em CSS, como deve ser
5 min de leitura
Os gradientes não se podem animar diretamente, mas tudo à volta deles pode. Quatro técnicas, o que cada uma custa ao navegador e como manter o movimento calmo e opcional.
CSS e webInterpolação OKLCH em gradientes CSS para misturas suaves
6 min de leitura
A maioria dos gradientes baços, de meio cinzento, não é um problema de cor mas de matemática. Duas palavras, in oklch, mudam onde o navegador faz as contas.
CSS e webTextura de ruído em CSS: acrescentar grão a gradientes com SVG
5 min de leitura
Uma ténue camada de ruído esconde as faixas e faz a cor lisa do ecrã parecer impressão ou película. Eis o filtro SVG por trás disto, afinado e pronto a colar.
CSS e webGradientes no Tailwind: classes lineares, radiais e cónicas na v4
5 min de leitura
O Tailwind v4 mudou o nome das suas classes de gradiente, juntou ângulos, gradientes radiais e cónicos e passou a mistura por omissão para oklab. Aqui tens o sistema inteiro, com o CSS que cada classe produz.
CSS e webGradientes SVG: lineares, radiais, contornos, texto e máscaras
6 min de leitura
O SVG tem o seu próprio sistema de gradientes, mais antigo do que os gradientes CSS e capaz de coisas que eles não conseguem: colorir um contorno, preencher uma palavra, partilhar um gradiente por várias formas e esbater qualquer coisa com uma máscara.
CSS e webBotões com gradiente em CSS que parecem premium
5 min de leitura
A maioria dos botões com gradiente parece barata pelas mesmas poucas razões: demasiados matizes, um hover que salta e texto que se apaga na ponta clara. Eis a receita que evita as três.
CSS e webDesempenho dos gradientes CSS: os gradientes abrandam um site?
7 min de leitura
Um gradiente CSS estático é quase gratuito. Os custos vêm do que as pessoas fazem com os gradientes: desfocados enormes, fundos que se repintam ao deslocar e animações que nunca páram. Eis como distinguir.
CSS e webPadrões CSS com gradientes repetidos
5 min de leitura
As paragens de cor duras transformam gradientes em formas, e o background-size transforma formas em mosaicos. Com estas duas ideias desenhas a maioria dos padrões clássicos em poucas linhas, sem ficheiros de imagem.
CSS e webGradientes no Figma: dicas para resultados mais suaves
6 min de leitura
O Figma faz um gradiente em dois cliques e um bom gradiente em vinte. Eis o caminho rápido pelo editor de gradientes, mais as soluções para meios cinzentos, faixas e CSS que não corresponde.
CSS e webGradientes com shaders WebGL, explicados para designers
7 min de leitura
Alguns gradientes na web derivam, brilham e cintilam de uma forma que nenhuma imagem ou regra CSS consegue. São shaders. Eis como funcionam, em palavras que um designer pode usar.
CSS e webFundos em gradiente no email: o que funciona no Gmail e no Outlook
6 min de leitura
Os gradientes ficam lindos num navegador e imprevisíveis numa caixa de correio. Constrói-os em camadas e cada leitor recebe algo que parece intencional.
CSS e webImagens OG dinâmicas: pré-visualizações automáticas
7 min de leitura
Fazer à mão uma imagem de pré-visualização para cada página não escala, e uma imagem genérica para o site inteiro desperdiça a imagem mais vista que tens. Gera-as em vez disso.