Utilizzato per proiettare ombre (spesso chiamate "Drop Shadows", come in Photoshop) dagli elementi. Ecco un esempio con il supporto del browser più profondo possibile:
.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 */ )Quello è:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- L'offset orizzontale (obbligatorio) dell'ombra, positivo significa che l'ombra sarà a destra del riquadro, un offset negativo metterà l'ombra a sinistra del riquadro.
- L'offset verticale (obbligatorio) dell'ombra, uno negativo significa che il riquadro-ombra sarà sopra il riquadro, uno positivo significa che l'ombra sarà sotto il riquadro.
- Il raggio di sfocatura (obbligatorio), se impostato su 0 l'ombra sarà nitida, più alto è il numero, più sarà sfocata e più l'ombra si estenderà. Ad esempio, un'ombra con 5px di offset orizzontale che ha anche un raggio di sfocatura di 5px sarà 10px dell'ombra totale.
- Il raggio di diffusione (opzionale), i valori positivi aumentano la dimensione dell'ombra, i valori negativi diminuiscono la dimensione. L'impostazione predefinita è 0 (l'ombra ha le stesse dimensioni della sfocatura).
- Colore (obbligatorio): accetta qualsiasi valore di colore, come hex, named, rgba o hsla. Se il valore del colore viene omesso, le ombre dei riquadri vengono disegnate nel colore di primo piano (testo
color). Ma attenzione, i browser WebKit meno recenti (precedenti a Chrome 20 e Safari 6) ignorano la regola quando il colore viene omesso.
L'uso di un colore semitrasparente come rgba(0, 0, 0, 0.4)è più comune e un bell'effetto, poiché non copre completamente / opacamente ciò che è finito, ma consente a ciò che è sotto di mostrare un po ', come un'ombra reale.
Esempio
Ombra interiore
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Esempio
Internet Explorer (8 e versioni precedenti) Box Shadow
Hai bisogno di un elemento in più, ma è fattibile 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; )Solo un lato
Usando un raggio di diffusione negativo, puoi schiacciare l'ombra di una scatola e spingerla fuori da un bordo di una scatola.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Bordi multipli e altro
Puoi separare il box-shadow da virgole tutte le volte che vuoi. Ad esempio, questo mostra due ombre con posizioni diverse e colori diversi sullo stesso elemento:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;L'esempio mostra come puoi usarlo per creare più bordi:
Guarda la freschezza della scatola-ombra di Pen Multiple! di Chris Coyier (@chriscoyier) su CodePen.
Applicando le ombre a pseudo elementi che poi manipoli, puoi ottenere delle ombre di scatola 3D piuttosto fantasiose:
Guarda il Pen CSS3 Box Shadows Effects di Halil İbrahim Nuroğlu (@haibnu) su CodePen.
Ombre super uniformi tramite più valori separati da virgole:
Guarda l'
ombra della scatola liscia della penna di Chris Coyier (@chriscoyier)
su CodePen.
Supporto browser
Vedere lo snippet nella parte superiore della pagina per le specifiche sulla copertura del prefisso del fornitore. Questa è una di quelle proprietà in cui eliminare i prefissi è abbastanza ragionevole a questo punto.