Admin/Dev

15
Sept.
2019

Astuce CSS : Appliquer des dégradés sur les textes

Publié par sky

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.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Les cookies assurent le bon fonctionnement de nos services. En continuant, vous acceptez leur utilisation sur notre site internet.
Accepter