Finora, per aggiungere un effetto ombreggiatura ad un box abbiamo dovuto sempre utilizzare un'immagine di background da aggiungere all'elemento.
La versione 3 dei CSS ha però introdotto una nuova interessante proprietà chiamata box-shadow. Essa ci consente di aggiungere facilmente una o più ombre agli elementi della pagina. Un'interessante caratteristiche di questa proprietà è la possibilità di inserire le ombre non solo all'esterno del box ma anche all'interno, semplicemente utilizzando una keyword specifica.
Il più semplice esempio di utilizzo della proprietà è il seguente:
div {
box-shadow: 10px 10px 5px #dedede;
}Nell'ordine i valori della proprietà si riferiscono:
- alla dimensione in orizzontale dell'ombreggiatura;
- alla dimensione in verticale dell'ombreggiatura;
- al raggio di sfumatura (maggiore è questo valore, più si avrà un effetto sfumato);
- al colore della sfumatura.
Le due dimensioni (in orizzontale e in verticale) hanno come punto di origine il bordo superiore sinistro del box e si estendono verso destra e verso il basso. Assegnando invece valori negativi alle due dimensioni, la sfocatura si estenderà verso sinistra e verso l'alto.
La regola appena vista restituirà un'ombreggiatura come la seguente:
Ombra interna al box
Come detto in apertura di lezione, è possibile assegnare un'ombra non solo all'esterno del box ma anche al suo interno. Di default la proprietà inserisce l'ombra all'esterno ma, utilizzando la keyword inset, l'effetto viene renderizzato all'interno del box.
Riprendendo l'esempio precedente con la nuova keyword:
div {
box-shadow: inset 10px 10px 5px #dedede;
}Il risultato, in questo caso, sarà il seguente:
Ombre multiple
Un'altra caratteristica molto importante della proprietà box-shadow è la possibilità di assegnare più di un'ombra all'elemento all'interno della stessa regola separandole con una virgola.
div {
box-shadow: 10px 10px 5px #dedede,
-10px -10px 5px #dedede,
10px -10px 5px #dedede,
-10px 10px 5px #dedede;
}Il risultato che otterremo è il seguente:
Supporto dei browser
La proprietà box-shadow, nel momento in cui scriviamo, è supportata nativamente solo da Opera e dalla versione beta di IE9. Fortunatamente gli altri browser, Internet Explorer nelle versioni precedenti alla 9 compreso, forniscono un'alternativa per aggiungere l'ombra ai box.
Firefox e Safari (quindi anche Chrome) utilizzano il classico suffisso propietario: –moz- e –webkit- come nel seguente esempio:
div {
/* ... */
-moz-box-shadow: 10px 10px 5px #dedede;
-webkit-box-shadow: 10px 10px 5px #dedede;
}Internet Explorer (fino alla versione 8) necessita dell'utilizzo di uno dei suoi filtri:
div {
/* ... */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10);
}Il filtro Shadow prende tre parametri, nell'ordine:
- colore della sfumatura;
- angolo di direzione della sfumatura (in gradi): i gradi girano in senso orario dal bordo superiore del box;
- dimensione della sfumatura.
Il codice necessario per applicare una sfumatura ad un box in maniera compatibile con tutti i browser è il seguente:
div {
/* ... */
-moz-box-shadow: 10px 10px 5px #dedede;
-webkit-box-shadow: 10px 10px 5px #dedede;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10);
box-shadow: 10px 10px 5px #dedede;
}L'esempio funzionante contenente tutto il codice visto nell'articolo è disponibile in questa demo.