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+
{ 1 trackback }
{ 1 comment… read it below or add one }
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.