Faire un texte en dégradé de couleurs

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>
 

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[tiot le mineur]

salut
il faut du temps mais contrairement à ce qu'on pense les retraités n'ont pas le temps
Mais je vais en faire un, d'ailleurs je viens souvent chez toi pour des petits trucs
bonne journée

[Ava]

Très joli, mais il faut prendre le temps...

[islamyat]

un petit coucou du jour en te souhaitant une bonne fin de journée

[Corinne ♥♥♥]

Bonjour


Je viens de visiter ton blog, je suis un peu dans le meme style en décoration astuce etc mais y'en a plein d'autres que je connaissais pas.


Super !


Très bonne journée. Byebye

[lavandine60]

Bonjour Aurélie, merci pour toutes ces astuces pour les blogs, c'est une mine d'idées et tes explications sont claires. Demain je pars pour une semaine, mais dès la semaine prochaine,
je vais appliquer certains trucs;


Peux-t-on te poser une question sur un sujet de présentation bien spécifique sur laquelle on bloque ?


Merci, à bientôt.

[Aurelie]

Oui, si je peux t'aider...  Excuse pour le retard de ma répônse mais j'étais en vacances

[missneferphotos.over-blog.com]

je suis désespérée tout me plait sur ton site et j'aimerais bien faire pareil mais j'ai beau suivre les instructions rien ne marche
quand je passe en htlm et que je c fais le copie colle
et que je met a jour quand çà revient sur ma page tout s'est effacé
la seule chose qui marche c les objets sui tombent
help
merci d'avance

[Aurelie]

J'irai voir demain un peu + en détail ton blog. Sinon, une info, tu es en quel niveau sur ton blog : confiance ou privilege ? En confiance, certaines choses te sont interdites... A demain

[Mamminic]

Merci pour ces astuces.... sans rien connaître du language informatique.... on peut devenir des "pros"!! Bonne journée. Un petit tour chez moi sur http://locavac-luchon-cure-ski.over-blog.com.

[bunny le chti]

salut
pas mal toutes ces combines
bonne soirée$$$

[Aurelie]

merci et bonne journée a toi

[Sourour]

 Aurelie ravie de te connaitre et te
feliciter pour ton blog qui apporte beaucoup de news pour les blogs super sympa je vais essayer de le dcouvrir scar pour moi le net et son informatique 2 mondes a part avec moi bisous bonne
journee
 

[Aurelie]

Merci à toi, pour les images aussi ! Marrant

[Louly cot cot cot]

Bisous + clic $$$$

[Aurelie]

Merci et bonne journée a toi aussi