Astuce CSS : Appliquer des dégradés sur les textes
Cela faisait longtemps que je n'avais pas partagé une petite astuce CSS. Le but de celle-ci est d'appliquer des dégradés des couleurs sur les textes de nos pages HTML.
Le principe est simple, nous allons reprendre la fonctionnalité des dégradés automatiques que nous avions précédemment vus, et nous allons la combiner à la propriété background-clip.
La propriété background-clip défini la manière dont le fond d'un élément est affiché. Ainsi il est possible de définir le remplissage indiqué en arrière-plan, en incluant les bords, les espaces définies en padding, ou encore le bloc intérieur seulement.
Mais il existe une 4ème valeur qui autorise le remplissage uniquement sur le texte, qui va agir comme un masque utilisant les lettres du bloc.
Ainsi pour réaliser notre astuce, nous avons besoin de définir un dégradé de fond, puis d'appliquer le remplissage sur le texte uniquement, et enfin, de définir la couleur du texte à transparent, sinon, il couvrirait ce que l'on essaye de montrer.
.content {background:-webkit-linear-gradient(top, red 30%, blue 70%); background-clip:text; -webkit-background-clip:text; color:transparent;}
Quelques points à noter ...
L'utilisation des préfixes -webkit- est nécessaire pour une compatibilité avec les navigateurs basés sur WebKit, Firefox s'en accommode très bien.
Sachant que la valeur de fond est occupée par le dégradé qui s'affiche sur les lettres, il faudra évidemment mettre un bloc conteneur si vous souhaitez appliquer une couleur de fond sous votre texte.
Si vous appliquez un dégradé vertical, comme sur l'exemple, ou diagonal, et que votre texte fait plusieurs lignes, le dégradé couvrira l'ensemble des lignes, il ne sera pas reproduit sur chacune des lignes.
Enfin, en lieu et place d'un dégradé de couleurs, vous pouvez aussi utiliser une image, une vraie. Les lettres prendront alors les pixels de cette image.
