Référence MIME
CSS3 ajoute quelques nouvelles notations fonctionnelles pour définir des valeurs de couleur pour les éléments qui sont : 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.
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é | Navigateur | ![]() | ![]() | ![]() | ![]() | ![]() |
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 |
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
Exemple : 📋 Copier 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>;
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).
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 :
Exemple : 📋 Copier 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 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
Exemple : 📋 Copier 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é 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
ExempleExemple : 📋 Copier 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 chapitre suivant
Par carabde 13 Fevrier 2016