Login

Bienvenue sur le site de Jef

Les bases du CSS

Couleurs et transparence

Pour indiquer la couleur d'un élément,du fond ou d'une bordure, nous disposons de six types de valeur.

  1. la couleur en anglais : red, black, white, blue, green, etc. ;
  2. la couleur en hexadécimal : #C0C0C0 ;
  3. la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;
  4. la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;
  5. la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;
  6. la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).

Liste des noms des couleurs

aliceblueF0F8FF   antiquewhiteFAEBD7  
aqua00FFFF   aquamarine7FFFD4  
azureF0FFFF   beigeF5F5DC  
bisqueFFE4C4   black000000  
blanchedalmondFFEBCD   blue0000FF  
blueviolet8A2BE2   brownA52A2A  
burlywoodDEB887   cadetblue5F9EA0  
chartreuse7FFF00   chocolateD2691E  
coralFF7F50   cornflowerblue6495ED  
cornsilkFFF8DC   crimsonDC143C  
cyan00FFFF   darkblue00008B  
darkcyan008B8B   darkgoldenrodB8860B  
darkgrayA9A9A9   darkgreen006400  
darkkhakiBDB76B   darkmagenta8B008B  
darkolivegreen556B2F   darkorangeFF8C00  
darkorchid9932CC   darkred8B0000  
darksalmonE9967A   darkseagreen8FBC8F  
darkslateblue483D8B   darkslategray2F4F4F  
darkturquoise00CED1   darkviolet9400D3  
deeppinkFF1493   deepskyblue00BFFF  
dimgray696969   dodgerblue1E90FF  
firebrickB22222   floralwhiteFFFAF0  
forestgreen228B22   fushiaFF00FF  
gainsboroDCDCDC   ghostwhiteF8F8FF  
goldFFD700   goldenrodDAA520  
gray808080   green008000  
greenyellowADFF2F   honeydewF0FFF0  
hotpinkFF69B4   indianredCD5C5C  
indigo4B0082   ivoryFFFFF0  
khakiF0E68C   lavenderE6E6FA  
lavenderblushFFF0F5   lawngreen7CFC00  
lightpinkFFB6C1   lightsalmonFFA07A  
lightseagreen20B2AA   lightskyblue87CEFA  
lightslategray778899   lightsteelblueB0C4DE  
lightyellowFFFFE0   lime00FF00  
limegreen32CD32   linenFAF0E6  
magentaFF00FF   maroon800000  
mediumaquamarine66CDAA   mediumblue0000CD  
mediumorchidBA55D3   mediumpurple9370DB  
mediumseagreen3CB371   mediumslateblue7B68EE  
mediumspringgreen00FA9A   mediumturquoise48D1CC  
mediumvioletredC71585   midnightblue191970  
mintcreamF5FFFA   mistyroseFFE4E1  
moccasinFFE4B5   navajowhiteFFDEAD  
navy000080   oldlaceFDF5E6  
olive808000   olivedrab6B8E23  
orangeFFA500   orangeredFFA500  
orchidDA70D6   palegoldenrodEEE8AA  
palegreen98FB98   paleturquoiseAFEEEE  
palevioletredDB7093   papayawhipFFEFD5  
peachpuffFFDAB9   peruCD853F  
pinkFFC0CB   plumDDA0DD  
powderblueB0E0E6   purple800080  
redFF0000   rosybrownBC8F8F  
royalblue4169E1   saddlebrown8B4513  
salmonFA8072   sandybrownF4A460  
seagreen2E8B57   seashellFFF5EE  
siennaA0522D   silverC0C0C0  
skyblue87CEEB   slateblue6A5ACD  
slategray708090   snowFFFAFA  
springgreen00FF7F   steelblue4682B4  
tanD2B48C   teal008080  
thistleD8BFD8   tomatoFF6347  
turquoise40E0D0   violetEE82EE  
wheatF5DEB3   whiteFFFFFF  
whitesmokeF5F5F5   yellowFFFF00  
yellowgreen9ACD32  

Couleurs hexadécimal

Ce petit utilitaire permet de sélectionner tout type de couleur. En cliquant sur la zone de texte, une palette de couleur apparaît et il suffit de cliquer sur la couleur que vous recherchez. Le code hexadécimal de la couleur s'écrit dans la zone de texte.
Il faut bien sûr ajouter un # devant le code couleur.

Exemple:
color:#76B4B5;

Pour sélectionnez et trouver une couleur, cliquer dans le rectangle :
Il a été développé par jscolor : site web de jscolor





Couleurs RGB

Il est possible de définir plus de 16 millions de couleurs en indiquant les valeurs RGB (Red Green Blue) d'une couleur.
Le standard CSS définit une notation RGB dite « fonctionnelle » permettant de définir les composantes de rouge, de vert et de bleu en indiquant leur proportion relative en pourcentage ou bien en notation entière absolue (chaque composante étant un entier compris entre 0 et 255).
Les valeurs sont les suivantes :

color:#76B4B5; est équivalent à color:rgb(118,180,181);
background-color:#76B4B5; est équivalent à background-color:rgb(118,180,181,0.8);
Exemple:
.boite { background-color:rgb(255,0,0,); }
Résultat:

Transparence RGBa

Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacité est appliquée au RGB via RGBa.
La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0). La dernière valeur (l'alpha) indiquant le degré d'opacité entre 0 et 1.
Les valeurs sont les suivantes :

Exemple avec une opacité de 80%:
color:rgba(118,180,181,0.8);
background-color:rgba(118,180,181,0.8);
Exemple avec une transparence de 1.0 , 0.5 et 0.2:
.boite1 { background-color:rgba(255,0,0,1); }
.boite2 { background-color:rgba(255,0,0,0.5); }
.boite3 { background-color:rgba(255,0,0,0.2); }



Attention la valeur a de RGBa ne fonctionne pas comme la propriété opacity. (voir plus loin opacity ou RGBa)

RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.

Couleurs HSL

Le CSS3 inclut maintenant dans la norme, la notion de teinte, de saturation et de luminosité (Hue, Saturation, Luminosity).

Le Hue permet de modifier la teinte donc la couleur, c'est une valeur numérique.

Par exemple, 0 (ou 360) représente le rouge, 120 le vert et 240 le bleu ; c'est une mesure sur la roue chromatique. Entre ces 3 valeurs, ce sont les nuances.

La saturation est une valeur de pourcentage, 100% équivalent à la couleur.

La luminosité est une valeur en pourcentage:

Exemple:
.boite { background-color:hsl(0,100%,50%); }
Résultat:

Transparence HSLa

C'est la même chose que la couleur hsl, sauf qu'il y a en plus la gestion de l'opacité de la couleur (sa transparence).

La couleur rouge est en hexa:#ff0000 ou en rgb: 255,0,0 ou en hsl: 0,100%,50%
Le même exemple que pour rgba avec une transparence de 1.0 , 0.5 et 0.2:

.boite1 { background-color:hsla(0,100%,50%,1); }
.boite2 { background-color:hsla(0,100%,50%,0.5); }
.boite3 { background-color:hsla(0,100%,50%,0.2); }



Opacity

L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à HSLA et à RGBA)
Il prend pour valeur entre 0.0 et 1.0

p.opaque  { opacity:0.8; }

Pour faire le même effet de transparence sous Internet Explorer < 9 vous devez utiliser la propriété de feuille de style css filter qui est propre à Internet Explorer.
La valeur opacity de la propriété de feuille de style css filter accepte comme valeur un nombre compris entre 0 et 100, 0 étant totalement transparent et 100 totalement opaque.

p.opaque  { filter:alpha(opacity=80); }
Exemple d'une image normal avec aucune opacité ou opacity:1;
Exemple de la même image avec une opacity:0.4;
img { opacity:0.4;
      filter:alpha(opacity=40); /* For IE < 9 */ }

Il est aussi possible de jouer avec la transparence et la pseudo-classe :hover

Exemple CSS:
.imggauche  { float:left; opacity:0.4; filter:alpha(opacity=40); }
.imgdroite  { float:right; opacity:0.4; filter:alpha(opacity=40);  }
.imggauche:hover  { opacity:1.0; filter:alpha(opacity=100); }
.imgdroite:hover  { opacity:1.0; filter:alpha(opacity=100);  }

Voici le résultat en survolant l'image opaque avec la souris:

Opacity ou RGBa

L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants. Cela est IMPORTANT, car un texte prend la même opacité que l'opacity de la couleur de fond. Ce qui n'est pas le cas si la couleur de fond est définie en hlsa ou rgba!

Pourquoi?
Les 2 exemples qui suivent ont été placé sur une image afin d'accentuer ce problème de transparence.

Illustration du principe de transparence de la couche Alpha (RGBa ou HSLa).

Code CSS:
.exemple   { background-image:url(/images/fleurs/glycine2.jpg); }
.boite1    { float:left; background-color:rgba(2,107,0,1); }
.boite2    { float:right; background-color:rgba(2,107,0,0.5); }
Code html:
<div class="exemple">
<div class="boite1"><p>Un texte</p><p> Alpha=1 </p></div>
<div class="boite2"><p>Un texte</p><p> Alpha=0.3 </p></div>
</div>

Un texte

Alpha=1

Un texte

Alpha=0.3

Comme vous pouvez constater dans cet exemple, la couleur jaune du texte est le même. La transparence ne s'est appliquée QUE sur le parent boite2.

Illustration du principe d'opacité (opacity) sur un élément.

Code CSS:
.exemple   { background-image:url(/images/fleurs/glycine2.jpg); }
.boite1    { float:left; background-color:#016b00; opacity:1; filter:alpha(opacity=100); }
.boite2    { float:right; background-color:#016b00; opacity:0.3; filter:alpha(opacity=30); }

N'oubliez pas que filter:alpha(opacity=30); est codé pour Internet Explorer < 9

Code html:
<div class="exemple">
<div class="boite1"><p>Un texte</p><p> opacity=1 </p></div>
<div class="boite2"><p>Un texte</p><p> opacity=0.3 </p></div>
</div>

Un texte

opacity=1

Un texte

opacity=0.3

Ici, la différence est flagrante et le texte jaune a hérité de la transparence de son parent boite2.