La proprietà box-shadow può essere applicata ad un Tag Div creando un effetto ombra.
La stringa di codice da utilizzare e ad esempio come questa:
Codice CSS
div
{
......
box-shadow: 3px 3px 8px 2px #333333;
}- il primo valore 3px sposta l'ombra in orizzontale, se il valore è positivo l'ombra appare sul lato destro dell'elemento, mentre se è negativa sul lato sinistro;
- il secondo valore 3px sposta l'ombra in verticale, se il valore è positivo l'ombra appare in basso, mentre se è negativo l'ombra appare in alto;
- il terzo valore 8px rappresenta il blur radius cioè la sfocatura dell'ombra, più il valore è alto più l'ombra appare sfocata, con valore zero l'ombra appare netta senza sfocature, non sono ammessi valori negativi;
- il quarto valore 2px rappresenta lo spread radius cioè il livello di diffusione dell'ombra, più alto è tale valore più l'ombra tenderà ad espandersi sui lati dell'elemento, viceversa quanto più è piccolo tale valore più l'ombra tende a scomparire;
- #333333 è il colore dell'ombra.
Di questi quattro valori, gli unici obbligatori sono i primi due.
I valori della sfocatura e della diffusione, invece, possono essere omessi, se non specificati, tali valori sono pari per default a 0.
Questa proprietà per poter funzionare correttamente su tutti i maggiori browser in circolazione bisogna utilizzare i prefissi:
- -webkit- serve ad estendere la proprietà a Safari (compresa la versione 5) e alle versioni di Chrome precedenti la 10.0;
- -moz-box-shadow serve ad estendere la proprietà alle versioni di Firefox precedenti la 4.0 (per l'esattezza Firefox 3.5+);
- Opera (dalla versione 10.5) e Internet Explorer (dalla versione 9.0) supportano la proprietà standard.
La proprietà box-shadow consente, inserendo la chiave inset, di inserire l'ombra anzicchè all'esterno dell'elemento al suo interno:
Codice CSS
#box
{
background: #ffffff;
width:200px;
/* Regola Standard */
box-shadow: 5px 5px 10px 2px #333333 inset;
/* Safari e Chome */
-webkit-box-shadow: 5px 5px 10px 2px #333333 inset;
/* FireFox */
-moz-box-shadow: 5px 5px 10px 2px #333333 inset;
}è anche possibile inserire più ombre basta separarle dalla virgola:
Codice CSS
#box
{
background: #ffffff;
width:200px;
padding: 10px;
-moz-box-shadow: 2px 2px 2px #333333, 5px 6px 3px #30F744;
-webkit-box-shadow:2px 2px 2px #333333, 5px 6px 3px #30F744;
box-shadow: 2px 2px 2px #333333, 5px 6px 3px #30F744;
}La proprietà box-shadow la si può estendere per creare ad esempio box con bordi multipli.
Consideriamo di avere questo box:
Codice HTML
<div id="box">
.....
</div>applicandoci le seguenti proprietà:
Codice CSS
#box
{
border: 4px solid maroon;
-webkit-box-shadow: 0 0 0 4px fuchsia, 0 0 0 8px black;
-moz-box-shadow: 0 0 0 4px fuchsia, 0 0 0 8px black;
box-shadow: 0 0 0 4px fuchsia, 0 0 0 8px black;
}e si ottiene questo risultato:
Impostando i valori di box-shadow in maniera adeguata è anche possibile far apparire l'ombra da un solo lato del box, considerando sempre un contenitore applicandogli la seguente proprietà:
Codice CSS
.......
box-shadow: 0 20px 16px -16px #333333;l'ombra appare soltanto nella parte bassa del box:
analizzando la suddetta proprietà si può notare che il primo valore che fa apparire l'ombra sul lato destro e sinistro è uguale a zero, il secondo valore è impostato su 20px e pertanto essendo un valore positivo l'ombra appare in basso, 16px è la sfocatura dell'ombra, e -16px è il valore di diffusione, in pratica per far apparire l'ombra su un solo lato è indispensabile impostare un valore di diffusione opposto rispetto alla sfocatura.
Se invece vogliamo un effetto di ombra diffusa, cioè che sia visibile su tutti i lati, il codice da utilizzare è il seguente:
Codice CSS
-moz-box-shadow: 0 0 25px #333333;
-webkit-box-shadow:0 0 25px #333333;
box-shadow: 0 0 25px #333333;impostando a 0 il valore dell'ombra in orizzontale e verticale, e a 25 px il blur radius, l'effetto che si ottiene e il seguente: