Deși nu se încadrează complet în browser-ul compatibil, există modalități de a crea neintrusiv gradienți de text pur CSS cu un pic de truc. Cheia este folosirea unui amestec de selectori de atribute, proprietăți specifice pentru webkit și atribute HTML personalizate.

Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!

---

Simplu HTML final

 
 Salut Lume 

Folosind atributele personalizate, putem să le cuprindem în aceste valori din foaia de stil utilizând metoda attr () funcţie.

---

CSS finală

 / * Selectați numai h1s care conțin un atribut 'data-text' * / h1 [date-text] poziție: relativă; culoarea rosie;  h1 [date-text] :: după content: attr (date-text); z-index: 2; culoare: verde; poziția: absolută; stânga: 0; -webkit-mask-image: -webkit-gradient (liniar, stânga sus, fund stânga, de la (rgba (0,0,0,1)), stop culoare (40% )));

Notă: Pavel a făcut referire la o metodă și mai sumară în comentariile. Asigurați-vă că ați verificat și asta!