Hoewel dit niet volledig compatibel is met browsers, zijn er manieren om non-verbaal zuivere CSS-tekstgradiënten te creëren met een beetje bedrog. De sleutel is om een ​​combinatie van attribuutselectoren, webkit-specifieke eigenschappen en aangepaste HTML-kenmerken te gebruiken.

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!

---

Laatste eenvoudige HTML

 
 Hallo Wereld 

Door aangepaste kenmerken te gebruiken, kunnen we deze waarden vervolgens vanuit ons stylesheet inhaken met behulp van de attr () functie.

---

Laatste CSS

 / * Selecteer alleen h1s die een kenmerk 'data-text' * / h1 [data-text] position: relative; kleur rood;  h1 [data-text] :: after content: attr (data-text); z-index: 2; kleur groen; positie: absoluut; links: 0; -webkit-masker-afbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linksonder, van (rgba (0,0,0,1)), kleurstop (40%, rgba (0,0,0,0 )));

Opmerking: Paul verwees naar een nog beknoptere methode in de opmerkingen. Controleer dat ook!