Selv om det ikke er helt kryss i nettleserkompatibel, er det måter å skape rent CSS-tekstgradienter med en smule trickery. Nøkkelen er å bruke en blanding av attributtvelger, webkitspesifikke egenskaper og egendefinerte HTML-attributter.

Abonner på vår YouTube-side for å se alle videoopplæringene!

---

Endelig Enkel HTML

 
 Hei Verden 

Ved å bruke egendefinerte attributter kan vi hekte inn disse verdiene fra vårt stilark ved å bruke attr () funksjon.

---

Endelig CSS

 / * Bare velg h1s som inneholder et datatekstattributt * / h1 [datatekst] posisjon: relative; fargen rød;  h1 [datatekst] :: etter innhold: attr (data-tekst); z-indeks: 2; farge: grønn; posisjon: absolutt; venstre: 0; -webkit-mask-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (0,0,0,1)), fargestopp (40%, rgba (0,0,0,0 )));

Merk: Paul refererte til en enda mer kortfattet metode i kommentarene. Husk å sjekke det ut også!