Comment ajouter des ombres portées aux éléments de boîte - des nuls

En plus des ombres de texte, CSS 3 vous donne le pouvoir d'ajouter des ombres aux éléments de la boîte, tels que les étiquettes. Dans la figure, vous pouvez voir comment les ombres portées ont été utilisées pour mettre en valeur des sections, telles que la mise de côté, dans cette page d'exemple du site Web de Jelly Rancher.

Tout comme l'ombre du texte, la première valeur indique le décalage horizontal au navigateur Safari, la seconde représente le décalage vertical et la troisième valeur décrit la façon dont l'ombre doit être floue. Encore une fois, la valeur par défaut est 0, et si vous ne spécifiez pas le flou, la couleur de l'ombre est complètement solide.

Voici la syntaxe des ombres portées pour les navigateurs WebKit:

-webkit-box-shadow: couleur de flou vertical horizontal;

Une couleur RGBa vous donne un meilleur contrôle sur l'apparence de l'ombre car vous pouvez ajouter de la transparence. De même, l'utilisation de la mesure em crée une ombre qui s'ajuste mieux si la taille du texte change.

Le style suivant ajoute une ombre portée à tous les éléments d'une page:

Vous pouvez ajouter des ombres portées au texte, aux balises et à d'autres éléments en utilisant CSS 3.

div {-webkit-box-shadow:. 15em. 25em. 5em rgba (27, 27, 27,.6);}