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
Commentaire de Blotin le 14 Janvier 2021 à 13:59

Genial, je n'arrivais pas et grâce à cette ligne j'ai directement réussi !

 
Commentaire de sky le 14 Janvier 2021 à 14:05

Salut, ravi d'avoir pu t'aider.

 
Commentaire de Marcelo le 2 Novembre 2021 à 18:21

Bonjour, merci beaucoup pour votre proposition de code !
Par contre sur Safari lorsque la page se charge le texte ne s'affiche pas, il faut par exemple le sélectionner et bizarrement après il s'affiche bien... Une idée pour corriger ça ?

 
Commentaire de sky le 2 Novembre 2021 à 20:35

Bonjour Marcelo,
Merci pour votre message.
Je ne vois pas de dégradé sur vos textes sur votre page, mais en effet, le texte n'apparait qu'une fois sélectionné avec la souris.
Peut être reprendre du début, avec un style à la fois pour voir où se trouve le soucis.

 

 

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.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
 
Tout accepter Tout refuser Gérer