Je vous propose de poursuivre l’exploration des possibilités du CSS3 avec pour cet article la possibilité d’arrondir les coins des boîtes, de générer d’élégantes ombres et de gérer finement les couleurs.

Les couleurs

Le CSS3 nous apporte de nouvelles façons de définir les couleurs.

Classiquement on peut définir les couleurs :

par leur nom, par exemple red, yellow, brown (vous avez la liste complète ici ou directement dans la spécification W3C)
par le code hexadécimal, par exemple #22651f, ou en abrégé dans le genre #b52, on définit ainsi les couleurs primaires additives dans l’ordre rouge-vert-bleu
par la fonction rgb(), avec les valeurs de rouge-vert-bleu de 0 à 255 ou en pourcentage, par exemple rgb(50,240,30) ou rgb(50%,10%,90%)

Tout ça est déjà bien mais le CSS3 nous apporte aussi : HSL, HSLA et RGBA. Voyons cela de plus près…

RGBA

Le RGBA est comme le RGB mais avec une quatrième valeur pour l’alpha, autrement dit la transparence. Les valeurs autorisées vont de 0 (totalement transparent) à 1 (totalement opaque).

Voici un rendu simple de cette transparence (JSFiddle) :

HSL and HSLA

Le HSL est un système différent pour définir une couleur, on n’a plus les primaires comme avec le RGB mais :

la teinte (H) : une valeur entre 0 et 359 (0 => rouge, 60 => jaune, 120 => vert, 180 => cyan, 240 => bleu, 300 => magenta)
la coloration (S), on parle aussi de saturation, c’est un pourcentage. A 100% on a la couleur totale, et à mesure qu’on descend en pourcentage la couleur devient « délavée »
la luminosité (L), aussi un pourcentage avec comme repère la valeur moyenne 50%, au-dessus ça devient plus lumineux et en dessous plus sombre.

On prétend que ce système est plus intuitif que le RGB parce qu’il se rapproche du fonctionnement de l’oeil.

Plutôt que de vous faire un grand discours le mieux est d’aller s’amuser avec un générateur en ligne (certainement le plus joli disponible) :

Vous allez ainsi comprendre rapidement et visuellement à quoi correspondent les trois paramètres avec en prime l’équivalent en RGB.

Le HSLA est la version avec en plus la transparence.

Opacity

Il existe également la règle opacity indépendamment des règles de couleur vue ci-dessus.

A priori l’effet est le même qu’avec le paramètre de transparence de RGBA et HSLA (JSFiddle):

Mais avec opacity la transprence se transmet aux enfants, ce qui n’est pas le cas avec les fonctions. On peut le voir facilement en reprenant l’exemple ci-dessus en ajoutant un simple texte :

Des coins arrondis

Fonctionnement

Des coins arrondis sont bien plus jolis que des angles aigus. Avec le CSS3 les créer est très facile avec de simples règles comme on va le voir.

La syntaxe de base est celle-ci :

border-radius: 15px;

Voici un exemple avec cette règle (JSFiddle) :

La valeur correspond tout simplement au rayon du quart de cercle dessiné. Ici le rayon est de 15 pixels.

La règle est bien reconnue par les navigateurs actuels :

Lorsqu’on saisit une seule valeur on agit sur les 4 coins. On peut se demander ce qui se passe quand on entre plusieurs valeurs. Voici ce que ça donne (JSFiddle) :

En résumé :

avec 2 valeurs : la première agit sur les coins haut gauche et bas droit, la seconde sur les deux autres
avec 3 valeurs : la première agit sur le coin haut droit, la seconde sur les coins haut droit et bas gauche, la dernière sur le coin bas droit
avec 4 valeurs : elles agissent dans l’ordre : haut gauche, haut droit, bas droit, bas gauche

Mais la règle border-radius est une version abrégée de 4 autres règles.

On peut facilement obtenir une boîte circulaire :

Ce qui peut être pratique pour des photos ou des icônes.

La règle unique :

border-radius: 2em;

est un résumé de :

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

Ces 4 règles permettent une plus grande précision en autorisant le dessin d’ellipses. On va ainsi définir non pas le rayon du cercle mais les deux rayons de l’ellipse. Voici un exemple (JSFiddle) :