Un texte en dégradé avec CSS3

Comme indiqué à la fin de mon gloubi tuto sur le texte en dégradé, il est maintenant possible d’obtenir un résultat similaire uniquement avec CSS3.

Les techniques CSS utilisées

Pour réaliser un texte en dégradé avec CSS3, on utilise deux techniques : les dégradés et le découpage d’arrière-plan (propriété CSS background-clip).

J’ai déjà présenté ces deux techniques chacune dans un article dédié :

Fusion !

Il est maintenant temps de rassembler ces deux techniques.

Premièrement, voyons le HTML (très simple) :

<span class="gradient_text">Texte en dégradé</span>

Concernant le CSS, ce n’est pas plus compliqué que ce qui a déjà été présenté précédemment.

D’abord, on défini le dégradé :

background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);

Et ensuite on fait en sorte que cet arrière-plan ne soit visible qu’à travers notre texte :

-webkit-background-clip: text;
background-clip: text;
color: #0000;

Ce qui donne :

.gradient_text {
    background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #0000;
}

Résultat final :

Le petit bonhomme en mousse

Et voilà, vous êtes maintenant capable de créer un texte en dégradé avec seulement quelques lignes de CSS.

À bientôt pour d’autres articles à caractère informatif.

Ce contenu a été publié dans CSS par geekc. Mettez-le en favori avec son permalien.

Laisser un commentaire