Formation CSS3

Couleurs et transparence

En synthèse additive les 3 couleurs fondamentales sont :
- le rouge qui apporte 35% de l'impression de luminosité,
- le vert qui apporte 50% de l'impression de luminosité,
- le bleu qui apporte 15% de l'impression de luminosité.
Une couleur est exprimée par un vecteur combinaison de ces 3 composantes.
À ces composantes peut être ajouté un canal alpha destiné à l'opacité.
Les composantes sont en général contrôlées par des dispositifs 8 bits et donc :
- exprimables 0 à 255 en décimal,
- exprimables 0x00 à 0xFF en hexadécimal.

Le modèle rgb correspond à la vision hardware du système :
- il est difficile à appréhender pour le novice,
- il ne correspond pas au besoin classique de contrôle des couleurs, modifier la luminosité impactera toutes les composantes.
Ce qui semblerait naturel serait de définir :
- une teinte c'est-à-dire une couleur,
- une saturation, c'est-à-dire un niveau de coloration allant du gris à la couleur choisie par la teinte,
- une luminosité ou intensité lumineuse.

En CSS3 il est possible de spécifier une couleur dans le système hsl,
la syntaxe sera : hsl(teinte, saturation, luminosité).
Il est également permis d'indiquer un canal de transparence compris entre 0 (transparent) et 1 (opaque).
La syntaxe sera : hsla(teinte, saturation, luminosité, transparence).

Exemple :

h1 {
  color:hsl(60,70%,80%);
  background-color:hsla(60,70%,80%,0.5);
}

Ces attributs permettent de fixer la couleur :
- du texte,
- du fond,
- des bordures...
Quelques attributs de couleurs :
- color pour couleur du texte,
- background-color pour couleur du fond,
- border-color pour couleur des bordures.

Exemples :

body {
 color:#CFF;
 background-color:#044;
}
div {border-color:#400}
em {color:rgb(0,0,80%)}

La propriété opacity permet de modifier le niveau de transparence d'un élément.
Cette transparence sera appliquée de façon globale à l'élément, c'est à dire :
- à son fond,
- à son texte,
- à ses images...
Si l'élément était déjà atténué en opacité, son opacité serait proportionnellement diminuée.

Exemple :

article {opacity:0.5}
section {opacity:0.5}

appliqué au code HTML :

<section><article>
<p>bonjour à toutes et à tous</p>
</article></section>

rendra l'article 3/4 transparent.