CSS : boites ombrées avec coins

Si vous visitez cette page avec votre smartphone orientez le "paysage" !

Avec CSS3 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.

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

Exemple

Des boites qui ont des formes étranges ...

Le code correspondant

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".

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.

Tests complémentaires

Il faut maintenant trouver les limites de la propriété.

Exemple

boite 1

boite 2

boite 3

Le code correspondant

Même si la largeur de la boite est exprimée en % on peut appliquer la propriété border-radius avec une valeur en pixels (voir premier H5).
Si la valeur de border-radius est exprimée en % alors que la largeur de la boite est aussi exprimée en % - mais la hauteur est pixels alors l'arrondi est uniquement horizontal (voir 2ième élément H5).
Dans ce cadre et pour obtenir un arrondi vertical il faut alors utiliser la syntaxe : border-radius : rx/ry (avec ry exprimé en pixels). Voir 3ième élément H5.

Border-radius peut s'appliquer à des images même si elles sont "inline" ou "inline-block".

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

Ci-dessous boites et images ombrées

Boite ombrée



Boite ombrée et aux coins arrondis


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 CCS3 il y a quatre paramètres à passer : décalage horizontal, décalage 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 : propriété clip-path
Retour menu