Apenas para o registro na história!
Eu vim com uma solução para meu próprio trabalho de 5 a 6 anos atrás, que é Gradext (javascript puro e css puro, sem dependência).
A explicação técnica é que você pode criar um elemento como este:
<span>A</span>
agora, se você quiser fazer um gradiente no texto, precisará criar várias camadas, cada uma individualmente colorida e o espectro criado ilustrará o efeito de gradiente.
por exemplo, observe esta é a palavra lorem dentro de a <span>
e causará um efeito de gradiente horizontal ( verifique os exemplos ):
<span data-i="0" style="color: rgb(153, 51, 34);">L</span>
<span data-i="1" style="color: rgb(154, 52, 35);">o</span>
<span data-i="2" style="color: rgb(155, 53, 36);">r</span>
<span data-i="3" style="color: rgb(156, 55, 38);">e</span>
<span data-i="4" style="color: rgb(157, 56, 39);">m</span>
e você pode continuar fazendo esse padrão por um longo período de tempo e também por um longo parágrafo.
Mas!
E se você quiser criar um efeito de gradiente vertical nos textos?
Depois, há outra solução que pode ser útil. Vou descrever em detalhes.
Assumindo o nosso primeiro <span>
novamente. mas o conteúdo não deve ser as letras individualmente; o conteúdo deve ser o texto inteiro, e agora vamos copiar o mesmo <span>
uma e outra vez Veja isso:
<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
Mais uma vez, mas!
e se você quiser criar esses efeitos de gradiente para mover e criar uma animação a partir dele?
bem, há outra solução para isso também. Você definitivamente deve verificar animation: true
ou mesmo o .hoverable()
método que levará a um gradiente para começar com base na posição do cursor! (soa legal xD)
é assim que estamos criando gradientes (lineares ou radiais) nos textos. Se você gostou da idéia ou deseja saber mais sobre ela, verifique os links fornecidos.
Talvez essa não seja a melhor opção, talvez não seja a melhor maneira de fazer isso, mas abrirá algum espaço para criar animações emocionantes e deliciosas para inspirar outras pessoas a encontrar uma solução melhor.
Isso permitirá que você use o estilo gradiente nos textos, o que é suportado pelo IE8!
Aqui você pode encontrar uma demonstração ao vivo em funcionamento e o repositório original também está no GitHub, de código aberto e pronto para receber algumas atualizações (: D)
Esta é a minha primeira vez (sim, depois de cinco anos, você ouviu direito) mencionar este repositório em qualquer lugar da Internet, e estou empolgado com isso!
[Atualização - agosto de 2019:] O Github removeu a demonstração de páginas do github desse repositório porque eu sou do Irã! Somente o código fonte está disponível aqui ...