Propriété: Les ombres

Vous pouvez appliquer une ombre portée à vos éléments block et vos éléments inline.

box-shadow

La propriété box-shadow s'applique sur un bloc, c'est à dire que la "boite" contenant l'élément ciblé aura une ombre.

selecteur {
     box-shadow : Xpx Xpx Xpx Xpx #COLOR inset;
}

Décortiquons ceci :

Le premier Xpx indique le décalage horizontal vers la gauche de l'ombre 
Le deuxième Xpx indique le décalage vertical vers le bas
Le troisième permet de gérer le flou.
Le quatrième correspond à la taille de l'ombre.
#COLOR indique bien évidemment la couleur de l'ombre
inset est une valeur optionnel permettant de définir si l'ombre est externe ou interne

boite_jaune {
     box-shadow: -4px 1px 2px -1px black;
}

.

Dans l'exemple ci-dessus, j'ai appliqué une ombre portée à mon objet "boite_jaune".
En appliquant une valeur négative pour le décalage horizontal, mon ombre se place à droite. Si vous voulez que l'ombre aille vers le haut, il faut appliquer une valeur négative au décalage vertical.

boite_jaune {
     box-shadow: -4px 1px 2px -1px black inset;
}

.

Même exemple, en rajoutant cette fois la valeur inset pour que l'ombre se trouve à l'intérieur de la boite. Vous remarquez que l'emplacement de mes ombres sont inversé par rapport à mon premier exemple, gardez cela en tête lorsque vous utilisez des ombres internes et des ombres externes.

text-shadow

La propriété text-shadow ressemble beaucoup à box-shadow

selecteur {
     text-shadow : Xpx Xpx Xpx #COLOR;
}

Comme son nom l'indique, cette propriété s'adresse au texte. L'ombre portée suivra les contours des lettres.

texte_ombre {
     box-shadow: -1px -1px 0px black;
}

Du texte avec une ombre

Cette propriété est très utile pour donner un effet de relief à vos textes.

Ombres multiples

Vous pouvez appliquer plusieurs ombres à un élément. Il suffit simplement de les séparer par des virgules :

selecteur {
     box-shadow : Xpx Xpx Xpx #COLOR, Xpx Xpx Xpx #COLOR;
}

Retour aux Propriétés