Les couleurs en CSS3 rgba(), hsl(), hsla() et opecity

CSS3 fournit plusieurs nouvelles façons pour définir une valeur de couleur.
CSS3 ajoute quelques nouvelles notations fonctionnelles pour définir des valeurs de couleur pour les éléments qui sont : rgba(), hsl(),  hsla() et opecity.

Somaire
CSS3 cours tutorial

Appui de navigateur des couleurs css3

Les nombres dans le tableau spécifient la première version de navigateur qui en charge les valeurs et la propriété de couleur de CSS3.

Propriété  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
RGBA, HSL et HSLA 4.0 9.0 3.0 3.1 10.1
opacity 4.0 9.0 2.0 3.1 10.1

Couleurs RGBA

rgba(255, 0, 0, 0.3)

rgba(0, 255, 0, 0.3)

rgba(0, 0, 255, 0.3)

Les valeurs de couleur RVBA seront une extension des valeurs de couleur RVB avec un canal alpha - qui spécifie l'opacité pour la couleur.
La valeur de couleur RVBA est définies dans le modèle RVBA (rouge-vert-bleu-alpha) à l'aide de la notation fonctionnelle rgba() .
Le paramètre alpha est un nombre compris entre 0  (complètement transparent) et 1.0 (complètement opaque).
 
Exemple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
         <meta charset="UTF-8">
         <title>exemple couleur rgba</title>
         <style>
         p{width:200px;}
         .p1{background-color: rgba(255, 0, 0, 0.3);}
         .p2{background-color: rgba(0, 255, 0, 0.3);}
         .p3{background-color: rgba(0, 0, 255, 0.3);}
         </style>
</head>
<body>
         <p class="p1">rgba(255, 0, 0, 0.3)</p>
         <p class="p2">rgba(0, 255, 0, 0.3)</p>
         <p class="p3">rgba(0, 0, 255, 0.3)</p>
</body>
</html>

 

Valeurs de couleur TSL

Les couleurs peuvent également être défini dans le modèle TSL (teinte-saturation-luminosité) à l'aide de la notation fonctionnelle  hsl() .

La teinte (en anglais Hue) est représenté comme un angle (de 0 à 360) on parle de  roue ou du cercle des couleurs (c'est-à-dire l'arc en ciel représenté dans un cercle).

  • La teinte prend donc les valeurs sur la roue chromatique (de 0 à 360) :

0 (ou 360) est rouge

120 est vert

240 est bleu

La saturation et la luminosité sont représentés sous forme de pourcentages. 100% de saturation signifie polychrome, et 0% est une nuance de gris. Considérant que, à la luminosité de 100% est blanche, 0% luminosité est noire, et 50% luminosité est normale.

Exemple :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
     <meta charset="UTF-8">
     <title>exemple couleur TSL</title>
     <style>
     p{width:200px;margin:0;padding:0}
     div{margin:15px;}
     .p1{background-color:hsl(120, 100%, 30%) ;}
     .p2{background-color:hsl(120, 100%, 50%) ;}
     .p3{background-color:hsl(120, 100%, 70%) ;}
     .p4{background-color:hsl(120, 100%, 90%) ;}
     .p11{background-color:hsl(240, 10%, 50%);}
     .p12{background-color:hsl(240, 40%, 50%);}
     .p13{background-color:hsl(240, 70%, 50%);}
     .p14{background-color:hsl(240, 100%, 50%);}
     </style>
</head>
<body>
<div>
     <p class="p1">HSL (120, 100%, 30%)</p>
     <p class="p2">HSL (120, 100%, 50%)</p>
     <p class="p3">HSL (120, 100%, 70%)</p>
     <p class="p4">HSL (120, 100%, 90%)</p>
</div>
<div>
     <p class="p11">HSL (240, 10%, 50%)</p>
     <p class="p12">HSL (240, 40%, 50%)</p>
     <p class="p13">HSL (240, 70%, 50%)</p>
     <p class="p14">HSL (240, 100%, 50%)</p>
</div>
</body>
</html>

 

Les couleurs HSLA

Les valeurs de couleur HSLA sont une extension des valeurs chromatiques TSL que nous avons vue ci haut, avec un canal alpha qui spécifie l'opacité pour une couleur.

Une valeur de couleur HSLA est spécifiée avec : hsla (teinte, saturation, luminosité, alpha), où le paramètre alpha définit l'opacité. Le paramètre alpha est un nombre compris entre 0 (complètement transparent) et 1.0 (complètement opaque).

Exemple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
     <title>exemple couleur TSLA</title>
     <style>
     p{width:250px;margin:0;padding:0}
     div{margin:15px;}
     .p1{background-color:hsla(0, 100%, 50%, 0.3) ;}
     .p2{background-color:hsla(0, 100%, 50%, 0.5) ;}
     .p3{background-color:hsla(0, 100%, 50%, 0.7) ;}
     .p4{background-color:hsla(0, 100%, 50%, 0.9) ;}
     </style>
</head>
<body>
<div>
     <p class="p1">hsla (0, 100%,50%,opacity:0.3)</p>
     <p class="p2">hsla (0, 100%,50%,opacity:0.5)</p>
     <p class="p3">hsla (0, 100%,50%,opacity:0.7)</p>
     <p class="p4">hsla (0, 100%,50%,opacity:0.9)</p>
</div>
</body>
</html>

 

La propriété Opacité

La propriété opacity de CSS3 définit l'opacité d'une valeur RGB spécifiée.

La valeur de propriété d'opacité doit être un nombre compris entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

La syntaxe est ;

RGB (255, 0, 0); opacité : 0,2

Exemple Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
     <meta charset="UTF-8">
     <title>exemple couleur TSL</title>
     <style>
     p{width:250px;margin:0;padding:0}
     div{margin:15px;}
     .p1{background-color:rgb(0, 150, 50); opacity:0.3 ;}
     .p2{background-color:rgb(0, 150, 50); opacity:0.5 ;}
     .p3{background-color:rgb(0, 150, 50); opacity:0.7 ;}
     .p4{background-color:rgb(0, 150, 50); opacity:0.9 ;}
     </style>
</head>
<body>
<div>
     <p class="p1">rgb (0, 150, 50);opacity:0.3</p>
     <p class="p2">rgb (0, 150, 50);opacity:0.5</p>
     <p class="p3">rgb (0, 150, 50);opacity:0.7</p>
     <p class="p4">rgb (0, 150, 50);opacity:0.9</p>
</div>
</body>
</html>

 


chapitre précédent sommairechapitre suivant

Par carabde 13 Fevrier 2016