Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog
1 juin 2016 3 01 /06 /juin /2016 20:09


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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Partager cet article
Repost0

commentaires

T
salut<br /> il faut du temps mais contrairement à ce qu'on pense les retraités n'ont pas le temps<br /> Mais je vais en faire un, d'ailleurs je viens souvent chez toi pour des petits trucs<br /> bonne journée
Répondre
A
<br /> <br /> Très joli, mais il faut prendre le temps...<br /> <br /> <br /> <br />
Répondre
I
<br /> <br /> un petit coucou du jour en te souhaitant une bonne fin de journée<br /> <br /> <br /> <br />
Répondre
C
<br /> <br /> Bonjour<br /> <br /> <br /> 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.<br /> <br /> <br /> Super !<br /> <br /> <br /> Très bonne journée. Byebye<br /> <br /> <br /> <br />
Répondre
L
<br /> <br /> 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,<br /> je vais appliquer certains trucs;<br /> <br /> <br /> Peux-t-on te poser une question sur un sujet de présentation bien spécifique sur laquelle on bloque ?<br /> <br /> <br /> Merci, à bientôt.<br /> <br /> <br /> <br />
Répondre
A
<br /> <br /> Oui, si je peux t'aider...  Excuse pour le retard de ma répônse mais j'étais en vacances<br /> <br /> <br /> <br />
M
<br /> 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<br /> quand je passe en htlm et que je c fais le copie colle<br /> et que je met a jour quand çà revient sur ma page tout s'est effacé<br /> la seule chose qui marche c les objets sui tombent<br /> help<br /> merci d'avance<br /> <br /> <br />
Répondre
A
<br /> 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<br /> <br /> <br />
M
<br /> 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.<br /> <br /> <br />
Répondre
B
<br /> salut<br /> pas mal toutes ces combines<br /> bonne soirée$$$<br /> <br /> <br />
Répondre
A
<br /> merci et bonne journée a toi<br /> <br /> <br />
S
<br />  Aurelie ravie de te connaitre et te<br /> 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<br /> journee<br />  <br /> <br /> <br />
Répondre
A
<br /> Merci à toi, pour les images aussi ! Marrant<br /> <br /> <br />
L
<br /> <br /> <br /> Bisous + clic $$$$<br /> <br /> <br />
Répondre
A
<br /> Merci et bonne journée a toi aussi<br /> <br /> <br />

Présentation

  • : Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation