Box-shadow

La propriété box-shadow permet d'ajouter une ombre à un élément. Par défaut, la couleur de l'ombre correspond à la couleur du texte de l'élément en question.

Afin d'être visible, une ombre nécessite d'être décalée de son parent. Pour ce faire, il faut lui attribuer une valeur de décalage sur les X, les Y ou les deux.

Par exemple:

Couleur

Pour spécifier la couleur d'ombrage, il suffit d'ajouter une unité de couleur à la fin.

Flou

Normalement, une ombre n'est pas nettement découpée. Heureusement, il est possible de la flouter grâce à une 3e valeur insérée avant la couleur. En anglais, cette valeur est nommée le "blur".

Étendu

En ajoutant une 4e valeur, il est possible d'augmenter/diminuer la taille d'une ombre afin que sa dimension ne soit pas identique à celle de son élément référent. En anglais, cette valeur est nommée le "spread".

Direction

Par défaut, les ombres sont projetées vers l'extérieur de leurs éléments, donnant ainsi l'impression qu'ils sont surélevés. Cependant, il est possible de changer la direction des ombres afin qu'elles soient projetées vers l'intérieur de leurs éléments, créant ainsi une illusion de profondeur.

Pour ce faire, il faut ajouter le mot-clé inset comme premier argument au box-shadow.

Par exemple:

Inspecteur

L'inspecteur est d'une aide précieuse lorsque l'on manipule un élément avec une ombre. Lorsque l'on examine la propriété CSS box-shadow dans l'inspecteur, on remarque à sa droite un icône de carré sous un autre carré rappelant une ombre. Lorsque cliqué, cet icône affiche une interface visuelle permettant de modifier facilement les valeurs de cette propriété.

OUTILS

Smooth Shadow
Générateur de box-shadow.
Smooth Shadow

Keyframes - Box-shadow
Générateur de box-shadow.
Keyframes - Box-shadow

Exercices

Box-shadow - Réseaux Sociaux
Pour cet exercice, vous devez compléter le CSS d’une barre de pastilles permettant d’accéder à divers réseaux sociaux.
Box-shadow - Réseaux Sociaux