### La propriété color

La propriété color permet de définir la couleur utilisée pour afficher le texte d'une boîte.

N'importe quelle façon de spécifier une couleur peut être utilisée avec cette propriété.

    h1 { color: #212C19; }
    h2 { color: rgb(77, 47, 113); }
    h3 { color: rgb(30%, 18%, 44%); }
    h4 { color: rgba(47, 38, 30, 0.75); }
    h5 { color: rgba(18%, 14%, 11%, 75%); }
    h6 { color: hsl(351, 26%, 23%); }
    p { color: hsla(104, 15%, 8%, 0.7); }
    div {color: darkred; }

La propriété color est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.
On peut donc facilement gérer la couleur de tous les textes d'une page en mettant la propriété color sur l'élément body, ou sur l'élément html.
Par défaut la couleur des textes est le noir (`#000000`).

Exemple : couleur du texte
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Fichier CSS : styles.css
html { font-size: 20px; /* pour bien voir les couleurs */ color: darkred; /* par défaut textes en rouge foncé */ } h3 { color: #044106; /* vert */ } div p:first-of-type { color: rgb(49, 150, 19); /* vert clair */ } div p:nth-of-type(2) { color: hsl(208, 100%, 37%); /* bleu */ } /* même bleu que précédent mais avec transparence */ div p:nth-of-type(3) { color: hsla(208, 100%, 37%, 0.5); }

Si la couleur d'une bordure n'est pas spécifiée (propriété border-color ou raccourci border), elle aura la couleur du texte de la boîte qu'elle entoure.

Exemple : couleur de bordure non spécifiée
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Fichier CSS : styles.css
html { color: darkred; }/* par défaut textes en rouge foncé */ h3 { color: #044106; /* vert */ border: 2px solid; } /* tous les paragraphes avec une bordure pointillée */ p { border: 2px dotted; } div p:first-of-type { color: rgb(49, 150, 19); /* vert clair */ } div p:nth-of-type(2) { color: hsl(208, 100%, 37%); /* bleu */ } /* même bleu que précédent mais avec transparence */ div p:nth-of-type(3) { color: hsla(208, 100%, 37%, 0.5); }

### Ombrage du texte

La propriété text-shadow permet de définir une ou plusieurs ombres sous du texte.

    h2 {
    	text-shadow: 10px 8px 5px #044106;
    }

Une ombre est définie avec 3 valeurs de longueur et une valeur de couleur.

4 valeurs pour définir une ombre

Le décalage horizontal place l'ombre du texte à sa droite (valeur positive) ou à sa gauche (valeur négative).
Le décalage vertical place l'ombre du texte en bas (valeur positive) ou en haut (valeur négative).
La 3éme valeur permet d'adoucir le contour de l'ombre en le rendant flou. Plus la valeur est élevée et plus l'ombre est adoucie.
Pour avoir des ombres réalistes, l'utilisation des fonctions de couleur avec transparence (`rgba()` ou `hsla()`) donne les meilleurs résultats.

Tester les ombres de texte

Les valeurs de décalage horizontal et vertical sont obligatoires. Les valeurs de flou et de couleur sont facultatitves. Si la valeur de flou n'est pas précisée elle sera par défaut de 0. Si la couleur n'est pas précisée, c'est la couleur du texte qui sera utilisée (propriété color).

On peut mettre plusieurs ombres sur du texte en séparant les groupes de 4 valeurs par une virgule :

    /* 3 ombres pour le texte des éléments h2 */
    h2 {
    	text-shadow: 10px 8px 5px #044106,
    				 -5px -8px 2px rgba(255, 240, 136, 0.5),
    				 12px -10px 8px #03C842;
    }

Les ombres sont appliquées par ordre de déclaration : la 1ère ombre déclarée est au dessus, la 2ème est sous la 1ère, la 3ème sous la 2ème, etc.

Exemple : plusieurs ombres - flammes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="flammes">La Gare des Etoiles</p> </body> </html>
Fichier CSS : styles.css
body { background: black; text-align: center; font-size: 80px; } .flammes { text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; }
Exemple : plusieurs ombres - silhouette
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="autour">La Gare des Etoiles</p> </body> </html>
Fichier CSS : styles.css
body { background: black; text-align: center; font: bold 80px/0.9 verdana; } .autour { color: #000; text-shadow: 0 1px 2px gold, 1px 0 2px gold, -1px 0 2px gold, 0 -1px 2px gold, 1px 1px 2px gold, -1px 1px 2px gold, 1px -1px 2px gold, -1px -1px 2px gold; }
Exemple : plusieurs ombres - 3D
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="trois-d">La Gare des Etoiles</p> </body> </html>
Fichier CSS : styles.css
body { background: black; text-align: center; font-size: 80px; } .trois-d { color: white; text-shadow: 1px 1px 0 #AAA, 1px 2px 0 #999, 1px 3px 0 #888, 1px 4px 0 #777, 1px 5px 0 #666; }
Exemple : plusieurs ombres - bosse - embouti
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="bosse">Effet de bosse</p> <p class="embouti">Emboutissage</p> </body> </html>
Fichier CSS : styles.css
body { background: grey; text-align: center; font-size: 80px; color: grey; } .bosse { text-shadow: -1px -1px white, 1px 1px #333; } .embouti { text-shadow: 1px 1px white, -1px -1px #444; }
Exemple : plusieurs ombres - néon
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="neon">Néon</p> </body> </html>
Fichier CSS : styles.css
body { background: black; text-align: center; font-size: 80px; color: grey; } .neon { color: #f5f5f5; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #3FF, 0 0 30px #3FF, 0 0 40px #3FF, 0 0 50px #3FF, 0 0 75px #3FF; }
Exemple : plusieurs ombres - rétro
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p class="retro">RETRO</p> </body> </html>
Fichier CSS : styles.css
body { background: black; text-align: center; font-size: 80px; color: grey; } .retro { color: #FC9; text-shadow: 3px 3px 0px #333, 5px 5px 0px #999; }