Box-shadow – ombreggiatura degli elementi in CSS3
La proprietà css3 box-shadow permette di aggiungere senza l’uso di immagine un effetto d’ombreggiatura agli elementi selezionati.
Grazie agli differenti valori del box-shadow, possiamo specificare che l’ombreggiatura sia posizionata a destra/sinistra e sotto/sopra verso l’esterno dell’elemento, la sua sfumatura (blur) ed il suo colore.
Il box-shadow non fa parte del ‘box-model’ nel senso che l’ombreggiatura aggiunta non è considerata nelle misure finale dell’elemento.
Questa proprietà css3 può essere combinata con altre proprietà come il css3 border-radius.
NB: Questa proprietà css3 è al momento supportata da Safari 3.1 in su con l’aggiunto del prefisso -webkit e Firefox3.5+ con l’aggiunto del prefizzo -moz (Ultimo aggiornamento: Maggio 2009)
Il box-shadow richiede al minimo 3 valori, 4 al massimo:
- la larghezza orizzontale dell’ombreggiatura
- Questo valore può essere sia positivo per un’ombreggiatura a destra, che negativo per una effetto a sinistra.
- Esempi:
box-shadow:10px 10px 20px #000000;
box-shadow:-10px 10px 20px #000000;
- la larghezza verticale dell’ombreggiatura
- Questo valore può essere sia positivo per un’ombreggiatura sotto, che negativo per una effetto sopra.
- Esempi:
box-shadow:10px 10px 20px #000000;
box-shadow:10px -10px 20px #000000;
- il ‘blur radius’ – la ‘sfumatura’ dell’ombreggiatura
- Questo valore può essere solo positivo con un minimo di zero
- Più grande è il valore, più l’ombreggiatura sarà ‘sfumata’
- Questo valore può essere omesso, pare a zero per un’ombreggiatura netta
- Esempi:
box-shadow:10px 10px 20px #000000;
box-shadow:10px 10px 0 #000000; che vale lo stesso di box-shadow:10px 10px #000000;
- il colore dell’ombreggiatura
- Esempi:
box-shadow:10px 10px 20px #000000;
box-shadow:10px 10px 20px black;
box-shadow:10px 10px 20px rgb(0,0,0);
- Esempi:
NB: nella stesura del W3C della proprietà css3 box-shadow, sono proposte 2 altri valori non supportati:
- il ‘spread radius’ per aggiungere un bordo in tutte le direzione dell’elemento
- il ‘inset’ per aggiungere l’ombreggiatura a l’interno dell’elemento invece dell’esterno
Esempi di box-shadow
1. Box-shadow con valori positivi
Preview fatta con Safari 3.1:
Il risultato:
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
2. Box-shadow con valori negativi
Preview fatta con Safari 3.1:
Il risultato:
box-shadow:-20px -20px 5px #000;
-webkit-box-shadow:-20px -20px 5px #000;
-moz-box-shadow: -20px -20px 5px #000;
3. Box-shadow senza blur specificato (pare a zero)
Preview fatta con Safari 3.1:
Il risultato:
box-shadow:-10px 5px #000;
-webkit-box-shadow:-10px 5px #000;
-moz-box-shadow: -10px 5px #000;
4. Box-shadow + border-radius
Preview fatta con Safari 3.1:
Il risultato:
box-shadow:5px -5px 10px #000;
-webkit-box-shadow:5px -5px 10px #000;
-moz-box-shadow:5px -5px 10px #000000;
border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px;
5. Box-shadow applicato a 2 elementi vicini – prova che l’ombreggiatura non fa parte del box-model
Preview fatta con Safari 3.1:
Il risultato:
Ultimo aggiornamento Maggio 2009: compatibile con Firefox 3.5+
About The Author
Marco Pegoraro
solo una segnalazione sull’ordine delle direttive CSS presentate in questo articolo.
Secondo me è meglio inserire per ultima la direttiva “css3 pura” box-shadow in modo che prenda il sopravvento sulle direttive specifiche per browser qualora il browser la supportasse:
box-shadow:-10px 5px #000;
-webkit-box-shadow:-10px 5px #000;
-moz-box-shadow: -10px 5px #000;
–> diventa –>
-webkit-box-shadow:-10px 5px #000;
-moz-box-shadow: -10px 5px #000;
box-shadow:-10px 5px #000;
A presto,
Marco.
anotherbreed
Più che “larghezza orizzontale” e “altezza verticale” sarebbe la posizione dell’ombreggiatura, visto che le sue dimensioni non possono variare dall’oggetto che la genera.
resiel
Come al solito si perdono in un bicchiere d’acqua. L’uso del valore “0″ per le posizioni x ed y dell’ombra sarebbero legittime (assumento questi valori infatti, le ombre sono perfettamente simulate in ogni browser). L’effetto sarebbe il medesimo di una superflua proprietà: “spread radius”. Peccato che per ora, il validatore non accetta tale valore, malgrado i browser si.