Ajouter des ombres aux éléments avec box-shadow en CSS

La propriété CSS box-shadow va nous permettre de créer des ombres dites « portées » autour de nos éléments (ou plus exactement des boîtes qui représentent les éléments). Nous allons pouvoir projeter l’ombre dans n’importe quelle direction et même vers l’intérieur.

Il convient de ne pas confondre box-shadow et text-shadow même si ces deux propriétés vont s’utiliser de façon similaire : la propriété text-shadow va nous permettre de créer des ombres derrière des textes tandis que box-shadow sert à créer des ombres autour de la boite de l’élément.

Vous pouvez voir ci-dessous la différence entre text-shadow (ombre bleue) et box-shadow (ombre rouge) :

 

Définition d’une ombre avec box-shadow

Pour générer une ombre portée, nous allons pouvoir passer jusqu’à 6 valeurs à la propriété box-shadow. Cependant, seules deux de ces valeurs vont être strictement obligatoires : il s’agit des valeurs définissant le décalage horizontal et du décalage vertical de l’ombre.

La liste complète des valeurs que va pouvoir accepter box-shadow est la suivante (valeurs dans leur ordre d’écriture) :

1. L’inset : si on précise le mot clef inset, alors l’ombre sera tournée vers l’intérieur de la boite c’est à dire interne à l’élément. Si on omet la valeur (cas par défaut), alors l’ombre sera externe ;
2. Le décalage horizontal de l’ombre (valeur requise). Cette valeur est une longueur qu’on va donc pouvoir préciser en unités absolues (px par exemple) ou relatives (em par exemple ; attention les pourcentages ne sont pas acceptés). Si la valeur passée est positive, l’ombre sera projetée sur une distance égale à la valeur passée vers la droite en partant de l’extrémité droite de la boite. Dans le cas contraire, l’ombre sera projetée à gauche de la boite en partant de son extrémité gauche ;
3. Le décalage vertical de l’ombre (valeur requise). Cette valeur est également une longueur et va pouvoir prendre les mêmes unités que la décalage horizontal de l’ombre. Si la valeur passée est positive, l’ombre sera projetée sur une distance égale à la valeur passée vers le bas en partant du bas de la boite. Dans le cas contraire, l’ombre sera projetée vers le haut de la boite en partant de son extrémité supérieure ;
4. Le rayon de flou. Cette valeur est encore une longueur et va nous permettre de rendre notre ombre floue en lui appliquant un flou Gaussien. La formule de création d’un flou Gaussien est assez complexe; retenez simplement qu’une moyenne entre les couleurs des pixels environnants va être établie en mixant ces couleurs ensemble. Plus la valeur du flou va être grande, plus le flou de l’ombre sera diffus et l’ombre étalée ;
5. Le rayon d’étendue de l’ombre. Cette valeur est à nouveau une longueur et va servir à agrandir ou à rétrécir la taille de l’ombre. Par défaut, sa valeur est 0 et cela correspond à une ombre de même taille que la boîte. Passer une valeur positive augmentera d’autant la taille de l’ombre tandis que passer une valeur négative la rétrécira d’autant ;
6. La couleur de l’ombre. Nous allons pouvoir définir la couleur de notre ombre. Toutes les valeurs de couleurs sont ici acceptées : nom de couleur, hex, RGB, RGBa…

Avant de passer à la création d’ombres avec box-shadow, j’aimerais attirer votre attention sur un point qui me semble essentiel de connaitre pour bien comprendre ensuite le comportement des ombres créées : la propriété box-shadow à elle seule va suffire à créer une ombre qui va par défaut faire la taille de la boite et être centrée derrière la boite. Cette ombre va donc être éclipsée par la boite et être invisible mais elle est bien présente.

Les valeurs données à box-shadow ne vont que nous permettre d’agrandir ou de rétrécir cette ombre, de la décaler par rapport à la boite ou de lui appliquer un effet de flou afin d’obtenir une ombre visible autour de notre boite. Savoir cela va être très important notamment pour comprendre le résultat lié à la définition d’un rayon de flou pour une ombre.

 

Exemples d’utilisation de box-shadow et de création d’ombres en CSS

Voyons immédiatement comment utiliser la propriété box-shadow en pratique. Dans les exemples suivants, nous allons commencer par ajouter des ombres très simples puis nous créerons des ombres de plus en plus complexes avec box-shadow.

Création d’ombres simples

Nous allons pouvoir créer des ombres très basiques autour de nos boites en ne renseignant que deux valeurs à la propriété box-shadow : la distance de projection ou de décalage de l’ombre sur le plan horizontal et sa distance de projection sur l’axe vertical.

En donnant une valeur positive au paramètre « décalage horizontal », l’ombre sera projetée à droite de la boite. Dans le cas contraire, elle sera projetée à gauche.

En donnant une valeur positive au paramètre « décalage vertical », l’ombre sera projetée en dessous de la boite. Dans le cas contraire, elle sera projetée au-dessus.

En passant des valeurs nulles, l’ombre ne sera pas projetée et restera derrière la boite. Attention : l’ombre existe quand même, elle n’est juste pas visible.

Notez que si on ne donne pas explicitement une couleur à l’ombre, alors elle sera de la même couleur que le texte de la boite.

Regardez plutôt les exemples suivants (les styles appliqués aux différents div ne sont qu’esthétiques, préoccupez-vous seulement des ombres définies avec box-shadow :

See the Pen Cours HTML CSS 9.5.1 by Pierre (@pierregiraud) on CodePen.

Ajout de la valeur inset pour créer une ombre interne

La propriété box-shadow va également nous permettre de créer des ombres internes à nos boites, c’est-à-dire de projeter l’ombre à l’intérieur de l’élément plutôt qu’à l’extérieur en lui ajoutant la valeur inset en première valeur comme cela :

See the Pen Cours HTML CSS 9.5.2 by Pierre (@pierregiraud) on CodePen.

Notez bien ici que la direction des ombres est toujours la même. Cependant, comme on demande à ce que l’ombre soit projetée à l’intérieur de la boite, l’ombre va être visible de l’autre côté de la boite par rapport à une ombre externe définie de la même façon. C’est simplement le « point de départ » de l’ombre qui change.

Création d’ombres colorées et / ou semi transparentes

Par défaut, l’ombre créée par box-shadow va être de même couleur que le texte de la boite à laquelle on applique l’ombre.

Nous allons cependant pouvoir choisir la couleur de notre ombre. Pour cela, il suffira de la renseigner en valeur de box-shadow. Cette propriété accepte toutes les notations de couleurs, que ce soit une couleur nommée, une notation RGB, hexadécimale ou même une notation RGBa qui va nous permettre de créer des ombres semi transparentes.

See the Pen Cours HTML CSS 9.5.3 by Pierre (@pierregiraud) on CodePen.

Note : La valeur « couleur » de l’ombre sera la dernière valeur à indiquer dans box-shadow en CSS.

Ajout d’un flou et ombre centrée autour de la boite

Nous avons vu que pour centrer une ombre par rapport à la boite, il suffisait d’indiquer des décalages horizontal et vertical de 0px lors de la définition de l’ombre avec box-shadow. Cela fait sens : par défaut, l’ombre d’une boite se trouve derrière la boite et la propriété box-shadow va nous permettre, entre autres, de la décaler.

Jusqu’à présent, nos ombres centrées n’étaient pas visibles puisqu’elles faisaient exactement la taille de notre boite. Nous allons cependant pouvoir les faire apparaitre en ajoutant un flou à notre ombre (la « taille » du flou va s’ajouter à la taille de l’ombre ou en modifiant la taille de celle-ci.

Essayons déjà d’ajouter un flou à nos ombres en ajoutant une nouvelle valeur à box-shadow et regardons les résultats ensemble. La valeur du flou va se placer après les valeurs liées aux décalages dans la propriété CSS.

See the Pen Cours HTML CSS 9.5.4 by Pierre (@pierregiraud) on CodePen.

Pour créer cet effet de flou, une moyenne entre les couleurs des pixels environnants va être établie en mixant ces couleurs ensemble. Plus la valeur du flou va être grande, plus le flou de l’ombre sera diffus et l’ombre étalée. Notez que le flou s’applique tout autour de l’ombre.

Une ombre plus grande ou plus petite que notre boite

Finalement, nous allons pouvoir modifier la taille de départ de notre ombre pour que celle-ci dépasse par défaut de la boite ou, au contraire, soit plus petite qu’elle.

Les valeurs positives agrandiront (ou étaleront) l’ombre et les valeurs négatives rétréciront l’ombre. Nous allons renseigner cette valeur correspondant au rayon d’étalement de l’ombre après la valeur du flou dans box-shadow.

See the Pen Cours HTML CSS 9.5.5 by Pierre (@pierregiraud) on CodePen.

Nous pouvons voir nettement dans le premier exemple que la taille de notre ombre a été agrandie puisque celle-ci est centrée et ne possède pas de flou mais dépasse bien de la boite.

Parmi ces exemples, j’attire votre attention sur les 4è et dernier, c’est à dire sur les deux ombres qu’on a rétrécit. En effet, ces deux ombres sont censées être décalées vers le bas et vers la droite. Or, on ne voit pas le décalage droit. Pour comprendre pourquoi, il suffit d’analyser le contenu de notre propriété box-shadow dans chacun des cas.

Dans le 4è exemple, l’ombre possède un décalage vers la droite de 10px et pas de flou. Or, on demande également à ce que l’ombre soit rétrécie de 10px. Ainsi, l’ombre va bien être décalée de 10px vers la droite mais comme elle fait désormais 10px de moins que la boite, elle ne va pas dépasser.

Dans notre dernier exemple, on définit un décalage vers la droite de 5px pour notre ombre. De plus, on lui ajoute un flou de 5px qui vient s’ajouter à la taille de l’ombre. Notre ombre devrait donc à nouveau dépasser de 10px. Cependant, ici aussi, on demande à ce que l’ombre soit rétrécie de 10px. L’ombre va donc bien à nouveau être décalée de 5px et un flou de 5px va bien être appliqué mais tout cela ne sera pas visible car compensé par le rétrécissement de l’ombre.

 

Création d’ombres multiples autour d’un élément

Nous allons tout à fait pouvoir définir plusieurs ombres autour de nos éléments en utilisant box-shadow. Pour cela, il suffit de séparer nos différentes ombres par des virgules lors de leur déclaration avec box-shadow.

Appliquer plusieurs ombres d’un coup à un élément peut nous permettre de créer différents niveaux d’opacité d’ombre et de créer des effets 3D intéressants.

See the Pen Cours HTML CSS 9.5.6 by Pierre (@pierregiraud) on CodePen.

Ici, nous réutilisons simplement ce que nous avons vu jusqu’à présent pour créer des ombres. Simplement, nous déclarons plusieurs ombres d’aspects et de tailles différents autour de nos éléments div.