IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Comprendre les couleurs en CSS3

Cet article a pour but de présenter la nouvelle gestion des couleurs en CSS3.

3 commentaires Donner une note à l´article (4.5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Compatibilité

Chrome, Safari, Opera, Firefox 4, Internet Explorer 9

II. Couleur 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.

  • entre 0 et 119 (nuance de rouge) ;
  • entre 120 et 239 (nuance de vert) ;
  • entre 240 et 359 (nuance de bleu).

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

La luminosité est une valeur en pourcentage:

  • 0% est le sombre (noir) ;
  • 50% est la moyenne ;
  • 100% est la lumière (blanc).

Exemple :

CSS

 
Sélectionnez
	p.hsl{
		background-color:hsl(100, 100%, 50%);
		color:hsl(250, 100%, 50%);
	}
	p.hslAutre{
		background-color:hsl(100, 100%, 50%);
		color:hsl(250, 100%, 25%);/* couleur plus sombre que la précédente */
	}

HTML

 
Sélectionnez
	<p class="hsl"> couleurs gérées en hsl </p>
	<p class="hslAutre"> couleurs gérées en hsl </p>

Démo

III. Couleur 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).

Exemple :

CSS

 
Sélectionnez
	p.hsla{
		background-color:hsl(100, 100%, 50%, 0.8);
		color:hsla(250, 100%, 50%, 0.5);
	}
	p.hslaAutre{
		background-color:hsla(90, 100%, 50%, 0.5);
		color:hsla(250, 100%, 50%, 1.0);
	}

HTML

 
Sélectionnez
	<p class="hsla"> couleurs gérées en hsla </p>
	<p class="hslaAutre"> couleurs gérées en hsla </p>

Démo

IV. Couleur RGBA

Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacité est appliquée au RGB via RGBA.

Les valeurs sont les suivantes :

  • R: couleur rouge en % (de 0% à 100%) ou en valeur (0 à 255) ;
  • G: couleur verte en % (de 0% à 100%) ou en valeur (0 à 255) ;
  • B: couleur bleu en % (de 0% à 100%) ou en valeur (0 à 255) ;
  • A: opacité en valeur flottante (0.0 à 1.0).

Exemple :

CSS

 
Sélectionnez
	p.rgba{
		background-color:rgba(255, 0, 0, 0.2);
		color:rgb(250, 100, 50);
	}
	p.rgbaAutre{
		background-color:rgba(90, 100, 50, 0.5);
		color:rgba(250, 100, 50, 0.4);
	}

HTML

 
Sélectionnez
	<p class="rgba"> couleurs gérées en rgba </p>
	<p class="rgbaAutre"> couleurs gérées en rgba </p>

Démo

L'intérêt du rgba et du hsla vient du fait que l'opacité qu'il applique aux élements, n'est pas héritée par les enfants de ces éléments (c'est le cas pour opacity).

V. Opacity

L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à HSLA et à RGBA)

Il prend pour valeur un flottant (entre 0.0 et 1.0)

Exemple:

CSS

 
Sélectionnez
	p.opacity{
		opacity:0.5;
	}
	p.opacityAutre{
		opacity:0.3;
	}

HTML

 
Sélectionnez
	<p class="opacity"> exemple sur opacity </p>
	<p class="opacityAutre"> exemple sur opacity </p>

Démo

VI. Remerciements

Merci à Clément BEAUFILS pour sa relecture.

3 commentaires Donner une note à l´article (4.5)

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2010 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.