Tutoriel CSS - sommaire

CSS : boites ombrées et avec coins arrondis

Avec CSS 3 les boites (ou images) peuvent prendre des formes diverses grâce à la propriété border-radius et les différentes méthodes de paramétrage de cette propriété.
Les boites (et images) peuvent être aussi ombrées avec la nouvelle propriété box-shadow

Boites et images avec coins arrondis : propriété 'border-radius'

Exemple

Ci-dessus un cercle, une ellipse, une "patate" et une image centrée et avec des coins arrondis.

Le code HTLM correspondant

Le CSS correspondant :
Définition de la classe "etrange" : {margin : 10px auto; background : lime;}
Définition de la classe "centre" : {display : block ; margin : 10px auto ; width : 60%;}

Analyse du code

Grâce à la propriété CSS border-radius on peut produire des boîtes avec des angles arrondis mais aussi des cercles et des ellipses, etc.
Comme vous pouvez le constater à la lecture du code, la propriété border-radius peut aussi s'appliquer à une image de type "block".
Notez que les valeurs de la propriété border-radius sont exprimées ici tantôt en pixels, tantôt en pourcentages.

Syntaxe

Radius veut dire rayon. Donc dans le cadre de cette propriété vous devez préciser le rayon de l'arc de cercle qui arrondit l'angle.

Observez bien le code CSS de cette page. Vous constatez que la propriété border-radius admet plusieurs syntaxes.

Pour dessiner un cercle il suffit de créer un carré (largeur = hauteur) et demander que les angles soient arrondis avec un rayon égal à la moitié du côté du carré. Donc la première syntaxe de cette propriété est : border-radius : valeur du rayon.

Pour dessiner une ellipse il suffit de créer un rectangle et demander que les angles soient arrondis avec un rayon horizontal égal à la moitié de la largeur et un rayon vertical égal à la moitié de la hauteur. Donc la syntaxe de la propriété est alors : border-radius : rh / rv. Avec rh : rayon: horizontal et rv : rayon vertical.

Pour dessiner une patate il faut dessiner un rectangle et demander que les quatre angles aient des rayons différents. La syntaxe de la propriété devient donc : border-radius : hg hd bd bg
Avec hg : rayon angle haut gauche, hd : rayon angle haut droit, bd : rayon angle bas droit et bg : rayon angle bas gauche.

Ombrer boites et images : propriété 'box-shadow'

Ci-dessous boites et images ombrées

Le code correspondant

Avant la version 3 de CSS il fallait beaucoup d'astuces pour ombrer du texte et des boîtes.
Ainsi pour donner l'illlusion d'un ombrage de boîte il fallait jouer sur les épaisseurs des bordures. Et encore le rendu n'était pas terrible ou encore produire une boîte grisée décalée de quelques pixels grâce au positionnement relatif.

Pour la propriété box-shadow de CSS3 il y a quatre paramètres à passer : offset horizontal, offset vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre (par défaut ombre en bas et à droite).
Pour le troisième paramètre 0px correspond à l'absence de floutage.

Dans la page suivante je vous présente la propriété clip-path qui permet de dessiner des boites et images ressemblant à des polygones.