Texto de gradiente CSS

Os desenvolvedores da Web conhecem a luta que todos nós tivemos para melhorar as fontes na Web. Seja pelo tempo de carregamento, por estratégias estranhas para usar fontes personalizadas (Cufon, alguém?) ou apenas para encontrar a fonte certa, embelezar o texto na Web nunca foi fácil.

Isso me fez pensar em fontes e gradientes de CSS, já que os gradientes também tiveram uma introdução difícil na Web. Vamos ver como podemos usar fontes gradientes apenas com CSS!

Para exibir um gradiente para uma determinada fonte, em vez de uma cor sólida, o senhor precisará usar alguns recursos da velha escola -webkit-propriedades pré-fixadas:

.gradient-text {
  /* standard gradient background */
  background: linear-gradient(red, blue);

  /* clip hackery */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Essa mistura de -webkit--CSS específica e fundo gradiente geral foi descoberta há dez anos, mas continua sendo a melhor maneira de obter um fundo CSS puro, mesmo com fontes personalizadas. Observe que, apesar do -webkit o Firefox ainda renderiza corretamente a fonte gradiente. Observe também que a remoção do prefixo interrompe a renderização correta – estranho!

Por mais complicadas que as fontes possam ser, é incrível que tenhamos um hack CSS bastante simples para obter texto gradiente. É uma pena que evitar o -webkit quebre a funcionalidade, mas bem-vindo ao mundo do CSS!