Utilisé pour projeter des ombres (souvent appelées «ombres portées», comme dans Photoshop) à partir d'éléments. Voici un exemple avec le support de navigateur le plus complet possible:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )C'est:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Le décalage horizontal (obligatoire) de l'ombre, positif signifie que l'ombre sera à droite de la boîte, un décalage négatif placera l'ombre à gauche de la boîte.
- Le décalage vertical (requis) de l'ombre, un négatif signifie que l'ombre de la boîte sera au-dessus de la boîte, un positif signifie que l'ombre sera en dessous de la boîte.
- Le rayon de flou (obligatoire), s'il est défini sur 0, l'ombre sera nette, plus le nombre est élevé, plus il sera flou et plus l'ombre s'étendra. Par exemple, une ombre avec 5px de décalage horizontal qui a également un rayon de flou de 5px sera 10px de l'ombre totale.
- Le rayon de propagation (facultatif), les valeurs positives augmentent la taille de l'ombre, les valeurs négatives diminuent la taille. La valeur par défaut est 0 (l'ombre a la même taille que le flou).
- Couleur (obligatoire) - prend n'importe quelle valeur de couleur, comme hex, named, rgba ou hsla. Si la valeur de couleur est omise, les ombres de la boîte sont dessinées dans la couleur de premier plan (texte
color). Mais sachez que les anciens navigateurs WebKit (antérieurs à Chrome 20 et Safari 6) ignorent la règle lorsque la couleur est omise.
L'utilisation d'une couleur semi-transparente comme rgba(0, 0, 0, 0.4)est la plus courante, et un bel effet, car elle ne couvre pas complètement / opaque ce que c'est fini, mais permet à ce qui est en dessous de transparaître un peu, comme une vraie ombre.
Exemple
Ombre intérieure
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Exemple
Internet Explorer (8 et plus bas) Box Shadow
Vous avez besoin d'un élément supplémentaire, mais c'est faisable avec filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Un côté seulement
En utilisant un rayon de propagation négatif, vous pouvez obtenir une compression dans une ombre de boîte et ne la pousser que sur un bord d'une boîte.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Plusieurs frontières et plus
Vous pouvez séparer les cases par des virgules autant de fois que vous le souhaitez. Par exemple, cela montre deux ombres avec des positions différentes et des couleurs différentes sur le même élément:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;L'exemple montre comment vous pouvez l'utiliser pour créer plusieurs bordures:
Découvrez la fraîcheur de Pen Multiple box-shadow! par Chris Coyier (@chriscoyier) sur CodePen.
En appliquant les ombres à des pseudo éléments que vous manipulez ensuite, vous pouvez obtenir des ombres de boîte assez fantaisistes en 3D:
Voir le Pen CSS3 Box Shadows Effects par Halil İbrahim Nuroğlu (@haibnu) sur CodePen.
Ombres super lisses via plusieurs valeurs séparées par des virgules:
Voir le Pen
smooth box-shadow de Chris Coyier (@chriscoyier)
sur CodePen.
Prise en charge du navigateur
Voir l'extrait en haut de la page pour plus de détails sur la couverture du préfixe du fournisseur. C'est l'une de ces propriétés où la suppression des préfixes est assez raisonnable à ce stade.