Bien que n'étant pas complètement compatible avec tous les navigateurs, il existe des moyens de créer de manière non intrusive des dégradés de texte CSS purs avec un peu de ruse. La clé consiste à utiliser une combinaison de sélecteurs d'attributs, de propriétés spécifiques au kit Web et d'attributs HTML personnalisés..

Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!

---

HTML simple final

 
 Bonjour le monde 

En utilisant des attributs personnalisés, nous pouvons ensuite intégrer ces valeurs à partir de notre feuille de style en utilisant le attr () une fonction.

---

CSS final

 / * Sélectionne uniquement les fichiers h1 contenant un attribut 'data-text' * / h1 [data-text] position: relative; La couleur rouge;  h1 [text-data] :: after content: attr (text-data); z-index: 2; la couleur verte; position: absolue; gauche: 0; -webkit-mask-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, à partir de (rgba (0,0,0,1)), couleur-stop (40%, rgba (0,0,0,0 )));

Note: Paul a référencé une méthode encore plus succincte dans les commentaires. Assurez-vous de vérifier cela aussi!