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

 Allez, je vous fournis ici le code HTML de ce message "I love you" animé, qui provient de chez SpringWidget.

Je vous invite d'ailleurs à aller faire un tour chez eux, on y trouve plein de gadgets sympa !

Code HTML à recopier :

<!-- SpringWidgets | I love you comment (#74873) | HTML | Generated on 05/03/2010 --><object type="application/x-shockwave-flash" allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" height="78" width="468" id="springwidgets_74873" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" /><param name="flashvars" value="" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgColor" value="0x000000" /><embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" flashvars="" quality="high" name="springwidgets_74873" wmode="transparent" width="468" height="78" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><div style="font:11px/12px arial;width:468px;"><a href="http://www.springwidgets.com/widgets/view/74873/?&width=468&height=78" target="_blank" title="Get this widget!">Get this widget!</a></div><div style="font:11px/12px arial;width:468px;"><a href="http://widgia.com" target="_blank" title="widgia.com">widgia.com</a></div><div><a href="http://widgia.com" target="_blank">More widgets here</a></div>

Vous pouvez faire apparaître votre message dans un eclair en allant sur le site  http://www.glassgiant.com/lightning/

Votre message dans un éclair, les choix

Vous pouvez paramétrer :

- Le texte de votre message, bien sur. (Pour faire apparaitre un coeur, il suffit de taper @

- le fond (background) : 3 choix, la campagne, la ville ou l'océan

- la couleur de votre texte

- la taille de l'animation (full size pour un grand rectange;e ou small square pour un carré

- la vitesse de l'apparition des lettres (normal ou rapide)

* 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

Vous fabriquez votre panneau lumineux chez SpaceMisc et tout se fait en 2 clics !

 Comment générer son panneau lumineux avec texte défilant

* Vous allez chez SpaceMisc

* Vous tapez votre texte

* Vous choisissez la couleur

* Clic sur le bouton "Generate" :

Le système vous montre votre bandeau défilant et vous donne le code à recopier.

Comment mettre le panneau lumineux sur son blog

Vous copiez le code fourni, et le collez (mode avancé, bouton HTML) là où vous souhaitez le mettre.

A relire

html, c'est quoi ?

Faire défiler un texte

 Astuce pour écrire en langage HTML / édition avancée

* 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