Comment ajouter des effets et des motifs de dégradé au texte —

Dans cette astuce rapide, nous montrerons à quel point il est facile d’ajouter des effets et des motifs de dégradé au texte d’une page Web.

La façon dont nous y parviendrons est de rendre le texte transparent, en plaçant une décoration d’arrière-plan sur le texte via le background-image propriété, et en découpant cette décoration d’arrière-plan sur les caractères du texte avec background-clip.

Quelques exemples de ce que nous pouvons créer sont illustrés ci-dessous.

Texte transparent et clip d’arrière-plan

Pour créer l’effet recherché, nous définissons d’abord la couleur de l’élément sur transparent. Dans le code ci-dessous, nous stylisons un <h1> titre:

h1 {
  color: transparent;
}

Bien sûr, cela signifie que le texte sera invisible, ce n’est donc pas suffisant en soi.

La prochaine étape consiste à postuler background-clip: textqui découpera toute coloration ou effet d’arrière-plan que nous plaçons sur l’élément uniquement aux caractères réels du texte, plutôt que de remplir toute sa case :

h1 {
  color: transparent;
  background-clip: text;
}

Nous sommes maintenant prêts à faire de la magie. Notre texte est transparent et tous les effets d’arrière-plan que nous lui appliquons seront découpés sur le texte lui-même.

Définir un dégradé d’arrière-plan sur le texte

Essayons d’abord de définir un effet de dégradé sur notre texte de titre :

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

Ici, nous avons défini un dégradé de gauche à droite qui s’étendra sur le texte du titre. Le stylo ci-dessous montre le résultat.

Il existe une infinité de variations que nous pourrions essayer, comme différentes couleurs, changer la direction du dégradé, créer des motifs de dégradé, etc.

Essayons un autre exemple, en créant cette fois un motif rayé :

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

Le stylo ci-dessous montre le résultat.

Voici un autre exemple, utilisant un modèle plus élaboré. J’ai également ajouté text-stroke pour donner aux lettres un peu plus de définition.

Consultez notre article Dégradés CSS : un cours intensif sur la syntaxe pour apprendre des exemples plus pratiques de choses que nous pouvons faire avec les dégradés CSS.

Définir une image d’arrière-plan sur du texte

Outre les effets de dégradé, nous pouvons également utiliser le background-image propriété pour appliquer des images réelles au texte. Cela peut être n’importe quelle image, mais essayons une image contenant un motif répétitif. Voici l’image que nous utiliserons.

Nous pouvons appliquer l’image du motif comme arrière-plan comme ceci :

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

J’ai ajouté background-size: contain pour forcer l’image d’arrière-plan à s’adapter parfaitement au texte. (Vous pouvez en savoir plus à ce sujet et sur d’autres propriétés de dimensionnement dans Comment utiliser la taille d’arrière-plan et la position d’arrière-plan CSS. Il existe différentes propriétés de dimensionnement pour vous aider à faire à peu près tout avec les images d’arrière-plan !)

Le résultat est affiché dans le stylo ci-dessous.

Juste pour le plaisir, voici un autre exemple avec une image de fond différente. Dans celui-ci, au lieu de text-stroke j’ai utilisé filter: drop-shadow() pour enrichir le texte.

Prise en charge du navigateur

Prise en charge du navigateur pour color: transparent et background-clip: text est fort depuis longtemps, mais les préfixes des fournisseurs sont encore nécessaires dans certains navigateurs. Vous remarquerez dans les stylos ci-dessus que nous avons effectivement utilisé le -webkit- préfixe du fournisseur pour Edge et Chrome :

-webkit-background-clip: text; 
background-clip: text; 

Si vous affichez les démos dans Edge et Chrome sans le préfixe du fournisseur, l’effet échoue.

Considérations relatives à l’accessibilité

Il est toujours bon d’être conscient de ce qui pourrait arriver si une fonctionnalité CSS que nous utilisons n’est prise en charge par aucun navigateur. Par exemple, si nous définissons la couleur du texte sur transparent mais un navigateur ne prend pas en charge background-clip: text;, l’utilisateur de ce navigateur ne pourra pas lire notre texte. (L’arrière-plan remplira toute la zone de texte, plutôt que de se limiter aux caractères du texte.)

Pour nous prémunir contre cela, nous pourrions placer nos effets fantaisistes dans un @supports bloc qui teste la prise en charge de background-clip:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    
  }
}

Pour les navigateurs qui ne prennent pas en charge background-clipnous pouvons soit laisser la couleur noire par défaut pour le texte, soit définir une autre couleur.

N’oubliez pas non plus que les effets avec lesquels nous avons joué ici peuvent rendre le texte plus difficile à lire, alors soyez-en conscient et n’allez pas trop loin, en particulier avec les images d’arrière-plan. Assurez-vous également que le texte est clairement lisible par rapport aux couleurs d’arrière-plan des éléments parents.

Conclusion

Dans cet article, nous avons examiné deux manières simples d’améliorer l’apparence du texte sur une page Web. Nous pourrait appliquer de tels effets à tout le texte d’une page, mais cela serait presque certainement excessif et gênerait probablement les visiteurs du site plutôt que de les impressionner.

Ce sont des effets à utiliser avec modération et discrétion. Utilisée à bon escient, cette technique peut être utilisée pour ajouter un peu de plaisir à vos pages Web.