Solo per la cronaca della storia!
Ho trovato una soluzione per il mio lavoro di 5-6 anni fa, che è Gradext (javascript puro e css puro, nessuna dipendenza).
La spiegazione tecnica è che puoi creare un elemento come questo:
<span>A</span>
ora, se vuoi creare una sfumatura sul testo, devi creare alcuni livelli multipli, ciascuno dei quali è specificamente colorato e lo spettro creato illustrerà l'effetto sfumatura.
ad esempio guarda che questa è la parola lorem all'interno di a <span>
e causerà un effetto gradiente orizzontale ( controlla gli esempi ):
<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 puoi continuare a fare questo schema per molto tempo e anche per un lungo paragrafo.
Ma!
Cosa succede se si desidera creare un effetto gradiente verticale sui testi?
Poi c'è un'altra soluzione che potrebbe essere utile. Descriverò in dettaglio.
Supponendo di <span>
nuovo il nostro primo . ma il contenuto non dovrebbe essere le lettere individualmente; il contenuto dovrebbe essere l'intero testo, e ora stiamo andando a copiare lo stesso <span>
ancora e ancora (conteggio delle campate definirà la qualità della vostra pendenza, maggiore durata, un risultato migliore, ma scarso rendimento). dai un'occhiata a questo:
<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>
Ancora una volta, ma!
cosa succede se si desidera che questi effetti sfumati si spostino e ne creino un'animazione?
bene, c'è un'altra soluzione anche per questo. Dovresti assolutamente controllare animation: true
o anche il .hoverable()
metodo che porterà ad un gradiente per iniziare in base alla posizione del cursore! (sembra fantastico xD)
questo è semplicemente il modo in cui creiamo gradienti (lineari o radiali) sui testi. Se ti è piaciuta l'idea o vuoi saperne di più, dovresti controllare i link forniti.
Forse questa non è l'opzione migliore, forse non il modo migliore per farlo, ma aprirà un po 'di spazio per creare animazioni emozionanti e deliziose per ispirare altre persone a trovare una soluzione migliore.
Ti permetterà di usare lo stile gradiente sui testi, che è supportato anche da IE8!
Qui puoi trovare una demo live funzionante e il repository originale è anche qui su GitHub, open source e pronto per ottenere alcuni aggiornamenti (: D)
Questa è la mia prima volta (sì, dopo 5 anni, l'hai sentito bene) per menzionare questo repository ovunque su Internet, e ne sono entusiasta!
[Aggiornamento - Agosto 2019:] Github ha rimosso la demo di github-pagine di quel repository perché vengo dall'Iran! Qui è disponibile solo il codice sorgente ...