Faire un joli texte en dégradé
avec les couleurs de votre choix
1. Les dégradés de couleurs
Utiliser un dégradé de couleurs est un bon moyen pour embellir vos textes et faire ressortir un texte par rapport à un autre.
2. Code HTML pour les dégradés de couleurs
Vous savez déjà mettre de la couleurs sur vos texte.
Pour un petit rappel, allez voir l'article : Changer les couleurs des textes
2.1 Le principe du dégradé
Il va falloir cette fois changer la couleur :
* pour chaque lettre, si vous voulez utiliser un dégradé sur un mot,
* pour chaque mot, pour un dégradé dans une phrase.
s
2.2 La balise de couleur
La balise qui définit la couleur est COLOR, et vous devez choisir les couleurs que vous allez utiliser.
Pour cela, le plus simple est d'utiliser le petit outil publié ici : Définir le code HTML de ses couleurs préférées
puis notez les codes de couleurs que vous souhaitez.
2.3 Code HTML pour changer les couleurs sur un mot
* Devant chaque lettre, ajouter le code :
<span style="color: #993366;"> avec le code de la couleur choisie
Taper votre lettre puis ajouter
</span> pour fermer la balise.
* Répéter le code (avec une autre couleur) pour chaque lettre du mot.
2.4 Exemple de code complet avec changement de couleur pour chaque lettre
Le code :
<span style="color: #ff0000;">B</span><span style="color: #ff6600;">L</span><span>O<span style="color: #008000;">G</span>
vous donne :
BLOG
2.4 Code HTML pour faire un dégradé sur une phrase
Le principe est le même, mais cette fois, vous changerez les couleurs pour chaque mot.
Le dégradé est plus joli si les couleurs choisies sont proches les unes des autres, et dans une même dominante de couleur, comme sur l'exemple en haut de cet article.
Pour un effet plus coloré, vous pouvez aussi utiliser des couleurs au contraire très différentes et qui tranchent beaucoup l'une à côté de l'autre, comme ci-dessous :
DES COULEURS VIVES ET TRANCHANTES SONT BELLES AUSSI !
2.4.1 Codes complets de textes en dégradés de couleurs
* Code HTML de la première phrase de cet article :
<font color="#ff9999">F</font><font color="#f5959f">a</font><font color="#eb92a5">i</font><font color="#e28fac">u</font><font color="#d88cb2">r</font><font color="#cf89b8">e</font><font color="#c585bf"> </font><font color="#bc82c5">u</font><font color="#b27fcc">n</font><font color="#a87cd2"> </font><font color="#9f79d8">j</font><font color="#9575df">o</font><font color="#8c72e5">l</font><font color="#826feb">i</font><font color="#796cf2"> </font><font color="#6f69f8">t</font><font color="#6666ff"></font><font color="#6666ff">e</font><font color="#695ff8">x</font><font color="#6c58f1">t</font><font color="#7051ea">e</font><font color="#734ae3"> </font><font color="#7744dd">e</font><font color="#7a3dd6">n</font><font color="#7d36cf"> </font><font color="#812fc8">d</font><font color="#8428c1">é</font><font color="#8822bb">g</font><font color="#8b1bb4">r</font><font color="#8e14ad">a</font><font color="#920da6">d</font><font color="#95069f">é</font><font color="#990099"></font>
* Code HTML de la phrase colorée du chapitre 2.4
<span style="color: #00ccff;">DES</span> <span style="color: #993366;">COULEURS</span> <span style="color: #ff6600;">VIVES</span> <span style="color: #00ff00;">ET</span> <span style="color: #ff00ff;">TRANCHANTES</span> <span style="color: #0000ff;">SONT</span> <span style="color: #339966;">BELLES</span> <span style="color: #ff0000;">AUSSI</span> <span style="color: #800080;">!</span>
 |
.gif) |
  |
 |
/fdata%2F2077833%2Favatar-blog-1127569230-tmpphprjx2Zb.jpg){kind=avatar}
Ce blog a pour objet de vous aider à faire votre blog. C'est
facile, et possible sans être informaticien !
