Assista ao tutorial de gradiente CSS
Noções básicas de gradiente CSS
Antigamente não era realmente possível usar gradientes sem depender de imagens, mas os desenvolvimentos em CSS significam que agora é simples e confiável criar gradientes a partir de nossas folhas de estilo.
Na sua forma mais simples, definimos gradientes como imagens de fundo. Definimos a imagem de fundo (usando apenas a abreviatura background está absolutamente bem) como sendo um linear-gradient ou um radial-gradiententão passamos as cores inicial e final:
1 |
.box { |
2 |
background: linear-gradient(#000046, #1cb5e0); |
3 |
}
|
Por padrão, um gradiente linear vai de cima para baixo, dando-nos algo assim:
Podemos mudar a direção adicionando um novo parâmetro antes das cores, por exemplo:
1 |
.box { |
2 |
background: linear-gradient(to right, #000046, #1cb5e0); |
3 |
}
|
Da mesma forma, alterando este parâmetro para ler to top right criaria um gradiente diagonal. Você também pode tornar essa diagonal exata, especificando algo como 45deg (ou qualquer ângulo que você escolher).
Indo um passo adiante, você não precisa parar em apenas duas cores. E você também pode usar nomes de cores, assim:
1 |
.box { |
2 |
background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan); |
3 |
}
|
Neste caso, cada uma das quatro cores ocupará igual quantidade de espaço disponível, proporcionando um gradiente suave e equilibrado.
Se não quisermos uma distribuição uniforme, mas quisermos que uma cor ocupe mais espaço que outra, podemos especificar esse valor como uma porcentagem diretamente após a cor, assim:
1 |
.box { |
2 |
background: linear-gradient(to right, #f05053 80%, #e1eec3); |
3 |
}
|
Dando-nos:
Gradientes Radiais
Seguindo em frente, podemos usar tudo o que aprendemos até agora e alterá-lo para exibir radial gradientes em vez disso. Trocando linear-gradient para radial-gradient é tudo que você precisa fazer aqui.
1 |
.box { |
2 |
background: radial-gradient(#fdbb2d, #22c1c3); |
3 |
}
|
Esse gradiente radial se estende até seu elemento pai, então esse retângulo termina com um gradiente semelhante a uma elipse. Para restringir esse gradiente de modo que permaneça um círculo, independentemente das proporções do pai, podemos adicionar o circle palavra-chave assim:
1 |
.box { |
2 |
background: radial-gradient(circle, #fdbb2d, #22c1c3); |
3 |
}
|
Indo ainda mais longe, podemos especificar também a origem do gradiente do círculo, de modo que ele comece (por exemplo) no canto superior esquerdo do pai.
1 |
.box { |
2 |
background: radial-gradient(circle at top left, #fdbb2d, #22c1c3); |
3 |
}
|
O efeito é sutil, mas a diferença entre este e um gradiente linear simples pode ser exatamente o que você está procurando.
Uso real de gradientes CSS
Onde podemos usar gradientes de maneiras interessantes?
1. Sobreposição de herói
Aqui está um exemplo de sobreposição, onde o gradiente é ligeiramente transparente (ele usa rgba valores) e fica em cima de uma foto.
O background propriedade pode aceitar vários valores que formam uma pilha, sendo o primeiro o mais alto e o último localizado na parte inferior da pilha. Se definirmos um gradiente primeiro, ele ficará acima de tudo o que definirmos posteriormente. Dê uma olhada neste trecho e veja se você consegue descobrir o que está acontecendo:
1 |
.hero { |
2 |
background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url(https://bg.jpg); |
3 |
}
|
Aqui está o efeito resultante:
2. Gradiente CSS no texto
Ter um gradiente no texto é um ótimo efeito, embora não seja totalmente suportado no sentido puro. Em vez disso, confiamos no background-clip propriedade (e seu prefixo -webkit-background-clip amigo), o que é uma espécie de hack, mas funciona muito bem.
Começamos com um pedaço de texto (um h1 neste caso) e aplique um gradiente ao seu fundo. O background-clip propriedade, dado um valor de texte remove o plano de fundo de todo o bloco, exceto da área atrás do texto. O texto color obscurece o fundo, é claro, então fazemos isso transparent para deixar o gradiente brilhar:
1 |
h1 { |
2 |
background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); |
3 |
|
4 |
-webkit-background-clip: text; |
5 |
background-clip: text; |
6 |
|
7 |
color: transparent; |
8 |
}
|
3. Bordas gradientes CSS
Gradientes de borda são algo que você deve ter visto em ga-analytics#sendElementsClickEvent”>Envato Elements e são uma ótima maneira de apimentar visualmente sua IU. É feito de maneira sutil, mas dê uma olhada no gradiente linear de azul para roxo nas bordas desses botões:
Para alcançar esse efeito, existem algumas abordagens. A primeira depende de primeiro darmos a um elemento (uma âncora, um contêiner, qualquer que seja) uma borda transparente. Em seguida, aplicamos nosso gradiente usando o border-image propriedade. Finalmente, definimos border-image-slice para 1, para que o gradiente utilize todo o contorno da borda.
1 |
.card1 { |
2 |
border: 5px solid transparent; |
3 |
border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d); |
4 |
border-image-slice: 1; |
5 |
}
|
Aqui está o resultado:
Existem alguns problemas com essa abordagem, no entanto. Primeiramente, border-image não é universalmente suportado em todos os navegadores, principalmente nas versões mais antigas do IE. Em segundo lugar, esta abordagem não permitirá que você adicione border-radius como você vê na IU do Envato Elements. Então, vamos examinar uma abordagem alternativa.
Começamos dando ao nosso div um position: relative. Em seguida, adicionamos um pseudoelemento a ele, dando a ele um negativo posição absoluta de qualquer que seja a largura da borda que escolhemos (5px neste caso):
1 |
.card2::after { |
2 |
content: ''; |
3 |
position: absolute; |
4 |
top: -5px; |
5 |
bottom: -5px; |
6 |
left: -5px; |
7 |
right: -5px; |
8 |
}
|
Isso nos dará um bloco de gradiente sólido cobrindo toda a nossa div. Adicionando um z-index de -1 garantirá que o bloco de gradiente se mova para trás do div.
A seguir (ufa, há muitas etapas para este), adicionamos um border-radius ao pseudoelemento igual ao de seu pai (vamos aplicar 10px cada). E então damos aos pais um histórico de tudo o que quisermos; igual ao fundo da página fará com que pareça transparente.
Finalmente, voltamos mais uma vez ao nosso amigo background-clipaplicando-o ao pai e desta vez atribuindo-lhe um valor de padding-box. Esta última ação garante que o preenchimento do div vá até a borda da borda e não além.
Portanto, esta abordagem final não é realmente uma fronteira no verdadeiro sentido, mas atinge o efeito que procuramos.
Uma terceira abordagem é possível, desta vez usando box-shadow para alcançar o efeito. Eu recomendo que você dê uma olhada no mixin Border-gradient de John Grishin no CodePen para ver como isso funciona.
Considerações de acessibilidade para gradientes CSS
O uso de gradientes da web tem o potencial de impactar a acessibilidade do seu conteúdo. Aqui estão algumas maneiras de usar gradientes CSS e ao mesmo tempo garantir que seu site possa ser acessado e usado pelo maior número de pessoas possível:
Compreender e implementar as diretrizes WCAG
As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) desenvolvidas pelo W3C são cruciais para garantir que o conteúdo da web seja acessível a todos. Estas diretrizes enfatizam a necessidade de o conteúdo da web ser operável, perceptível, compreensível e robusto. A integração dessas diretrizes em seu design gradiente garante que todos os usuários tenham acesso às mesmas informações e experiência.
Fornece estilos alternativos
Nos casos em que propriedades CSS como gradientes não são suportadas por determinados navegadores, é essencial fornecer estilos alternativos. Isso garante que os usuários com navegadores mais antigos ou menos capazes não sejam excluídos. Por exemplo, você pode usar uma cor sólida como substituto para navegadores que não suportam gradientes. O mecanismo de cascata CSS permite que os navegadores ignorem estilos não suportados e usem o último valor disponível para essa propriedade.
Use texto acessível sobre imagens
Ao usar gradientes, especialmente em imagens, certifique-se de que o texto permaneça legível. Técnicas como usar sobreposições de gradiente de cores suaves e brincar com estilos e posições de texto podem melhorar muito a legibilidade sem sacrificar a estética. Por exemplo, posicionar o texto fora da área da imagem ou usar cores contrastantes pode tornar o texto mais acessível.
Conclusão
Então aí está! Esta cartilha sobre gradientes CSS deu a você o começo que você precisa, além de uma olhada em como você pode usar gradientes na web. Se você deseja criar um gradiente de borda CSS, um gradiente radial ou um gradiente linear, esperamos que agora você entenda melhor como fazer isso.
Se você viu algum outro uso criativo de gradientes por aí, deixe-os na seção de comentários.
Recursos úteis
