Box-shadow

2

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Couleur

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

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Générateur d'ombres:

Pour en savoir plus, voir cet article MDN à propos de box-shadow.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme