@fernando

finally

Olá você que lê meu blog!

Nesse artigo, que vai ser bem curto e interessante, quero compartilhar com vocês, como deixar seus textos com um degradê lindo igual esse aí na foto, então prepara sua bebida favorita e bora lá.

No CSS, quando queremos definir uma cor usamos a propriedade color. Aqui vamos um pouco mais longe e deixar o nosso texto com um aspecto bem legal, usando degradê aka gradiente.

Exemplo usando apenas a propriedade color

color

E como resultado teremos:

resume

Apartir desse ponto, vamos começar a trabalhar adicionando o degradê no texto, par que ele fique igualzinho no que está na foto de exemplo. Atenção, ocultei o código HTML.

final

Como esse código aí em cima teremos o resultado que queremos atingir.

finally

Adicionando o degradê

Agora vamos desmistificar o que acabamos de fazer nesses trechos de CSS. Bem, no CSS os degradês são suportados como sendo imagens de fundo, usando background-image e temo umas variações de gradientes que são: lineares, cônicos e radiais, no nosso projeto estamos usando o linear-gradient que tem o sentido para cima.

Transformar o fundo em texto

Nota que temos o -webkit-background-clip, poderiamos ter usado o background-clip separado do prefixo. Essa propriedade serve para limitar a visualização do plano de fundo do elemento, e ela recebeu como valor text, que significa, me mostre apenas o background que esteja por baixo de um texto. Atenção que ele não esconde o texto, ele apenas está limitado a área por baixo do texto.

Deixando o texto escondido

Então para sobrescrevermos a cor do texto, usamo s o -webkit-text-fill-color. Quando definida ela tem preferência em relação a cor. Então usando ela com o valor transparent, é possível ver o texto que estava escondido, para testar esse trocadilho, fica como dever de casa.

Conclusão

Vale resaltar que não serve apenas para gradientes, você pode usar para qualquer plano de fundo do seu projeto. E o processo se mantém o mesmo: definir o plano de fundo, limitar o plano de fundo ao texto e esconder o texto. É isso, se gostou compartilha e me mande seu feedback nas minhas redes sociais. 🤓