Ombre d’un seul côté
Avec la propriété box-shadow, les ombres en CSS sont simples, mais comment faire apparaître l’ombre d’un seul côté de l’élément ?
Exemple d’ombre à droite du bloc :
Valeurs de box-shadow :
1re valeur = décalage horizontal – 8px déplace l’ombre vers la droite
2e valeur = décalage vertical, 0 la laisse à la hauteur de l’élément
3e valeur = rayon du flou
4e valeur (ici -2px) = taille (spread) – une valeur négative réduit l’ombre, qui n’est donc visible ni en haut ni en bas
.test_div
{
background-color: #FFFFFF;
width: 100px;
height: 100px;
box-shadow: 8px 0 7px -2px #DADADA;
}
/* l’ombre se trouve ainsi à droite du bloc */
Valeurs de box-shadow :
1re valeur = décalage horizontal – 8px déplace l’ombre vers la droite
2e valeur = décalage vertical, 0 la laisse à la hauteur de l’élément
3e valeur = rayon du flou
4e valeur (ici -2px) = taille (spread) – une valeur négative réduit l’ombre, qui n’est donc visible ni en haut ni en bas