Comment Créer un Texte Multicolor en Utilisant HTML et CSS

Les textes multicolores peuvent rendre votre site plus attrayant et intéressant pour les visiteurs. Ce snippet vous aidera à apprendre comment créer de tels textes pour votre site Web.

Il existe 3 moyens de créer un texte multicolore. Essayons ensemble.

1. Utilisez les éditeurs d’images

Vous pouvez créer un texte multicolore à l’aide d’éditeurs d’images comme Pixelmator, Photoshop et etc. Vous créez une image multicolore et l’intégrer sur votre site Web.

Prenez en compte, qu’au cas de cette méthode, le texte multicolore ne sera pas consultable.

En conséquent, votre code ressemblera à ceci:,/p>

<img src="textemulticolor.png"/>

2. Créez les éléments séparés

Une autre façon est de créer du texte avec des éléments séparés à l’aide de la balise HTML <span>, qui est un conteneur vide universel. Cela signifie que vous créez un texte multicolore en mettant chaque lettre dans un élément séparé, pour définir une couleur différente pour chaque lettre de votre texte.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <span style="color:#FF0000">B</span>
    <span style="color:#66CC66">o</span>
    <span style="color:#FF9966">n</span>
    <span style="color:#FFCCCC">j</span>
    <span style="color:#FF0066">o</span>
    <span style="color:#FFCCCC">u</span>
    <span style="color:#FF0066">r</span>
  </body>
</html>

Essayez-vous-même!

3. Utilisez CSS

Finalement, vous pouvez utiliser CSS. C’est la façon la plus facile de créer ce genre de texte.

Un exemple de texte multicolore peut être un texte arc-en-ciel, qui semble très attrayant.

Comme toujours, vous avez besoin de HTML comme base. Tout d’abord, vous devez mettre votre texte dans une balise HTML <h1> et lui donner d’un nom de classe “textemulticolor”.

<h1 class="textemulticolor">Soyons créatifs!</h1>

Ensuite, vous avez besoin de la propriété CSS background-image qui ajoute du fond de dégradé à votre texte à l’aide de la fonction “linear-gradient”, où vous mettez les noms des couleurs que vous préférez.

Pour obtenir du texte multicolore au lieu de l’arrière-plan multicolore, vous devez utiliser la propriété CSS background-clip, qui spécifie à quelle distance les background-color et background-image doivent être de l'élément. Cette étape donne quelques couleurs à votre texte, mais pas exactement ce que vous voulez.

Vous pouvez obtenir le résultat final en faisant votre couleur de texte transparent à l’aide de la propriété CSS color, pour que la couleur de fond soit reflétée dans le texte.

.textemulticolore {
  background-image: linear-gradient(
    to left,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  -webkit-background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

Maintenant on va réunir toutes les parties et voir l’exemple de code complet:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body .textemulticolore {
        background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="textemulticolore">Soyons créatifs!</span>
    </h1>
  </body>
</html>

Essayez-vous-même!