Overblog Suivre ce blog
Editer l'article 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

Repost 0
Published by Aurelie - dans Les textes
commenter cet article

commentaires

tiot le mineur 02/06/2016 11:52

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 29/10/2010 21:03



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



islamyat 27/07/2010 16:28



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



Corinne ♥♥♥ 29/05/2010 13:34



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 26/04/2010 13:08



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 01/05/2010 22:50



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



missneferphotos.over-blog.com 14/02/2010 14:27


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 14/02/2010 22:46


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 07/02/2010 17:36


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 22/01/2010 22:05


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


Aurelie 25/01/2010 15:04


merci et bonne journée a toi


Sourour 22/01/2010 11:41


 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 22/01/2010 12:29


Merci à toi, pour les images aussi ! Marrant


Louly cot cot cot 22/01/2010 10:45




Bisous + clic $$$$


Aurelie 22/01/2010 11:29


Merci et bonne journée a toi aussi


Présentation

  • : Faire un blog
  • 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