Sebbene non sia completamente compatibile con browser incrociati, ci sono modi per creare in modo non invasivo sfumature di testo CSS pure con un po 'di inganno. La chiave è utilizzare una combinazione di selettori di attributo, proprietà specifiche del webkit e attributi HTML personalizzati.

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

---

HTML semplice finale

 
 Ciao mondo 

Usando gli attributi personalizzati, possiamo quindi collegarci a questi valori dal nostro foglio di stile usando il attr () funzione.

---

CSS finale

 / * Seleziona solo h1 che contengono un attributo 'data-text' * / h1 [data-text] position: relativo; colore rosso;  h1 [data-text] :: after content: attr (data-text); z-index: 2; colore: verde; posizione: assoluta; a sinistra: 0; -webkit-mask-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (rgba (0,0,0,1)), color-stop (40%, rgba (0,0,0,0 )));

Nota: Paul ha fatto riferimento a un metodo ancora più succinto nei commenti. Assicurati di controllare anche quello!