Även om det inte går helt över webbläsarkompatibel, finns det sätt att nonintrusively skapa rena CSS-textgradienter med lite trickery. Nyckeln är att använda en blandning av attributväljare, webkitspecifika egenskaper och anpassade HTML-attribut.

Prenumerera på vår YouTube-sida för att titta på alla videohandledning!

---

Final Simple HTML

 
 Hej världen 

Genom att använda egna attribut kan vi sedan haka i dessa värden från vårt stylesheet genom att använda attr () fungera.

---

Slutlig CSS

 / * Välj endast h1s som innehåller ett attribut för data-text * / h1 [data-text] position: relative; färgen röd;  h1 [datatekst] :: efter innehåll: attr (data-text); z-index: 2; färg: grön; position: absolut; vänster: 0; -webkit-mask-image: -webkit-gradient (linjär, vänster topp, vänster botten, från (rgba (0,0,0,1)), färgstopp (40%, rgba (0,0,0,0 )));

Obs! Paul hänvisade till en ännu mer kortfattad metod i kommentarerna. Var noga med att kolla in det också!