Un’altra interessante novità introdotta da CSS3 consiste nella possibilità di applicare un’ombra ad un box mediante la proprietà box-shadow. Firefox, Chrome, Safari e Opera la supportano senza problemi, Internet Explorer solo dalla versione 9 in avanti.
Cominciamo con un primo esempio per prendere dimestichezza con la proprietà box-shadow:
div {
width: 220px;
padding: 5px;
background: #99CCFF;
box-shadow: 10px 10px 5px #888888;
}Il div a cui si applica questa regola di stile si presenta come nella figura che segue:
Prima di proseguire con la analisi della sintassi di box-shadow, voglio fare una precisazione: se un box ha un bordo arrotondato, anche l’ombra sarà arrotondata con lo stesso raggio definito per l’angolo del box.
La sintassi di box-shadow
Analizziamo più nel dettaglio la sintassi della proprietà box-shadow di CSS3. Questa proprietà richiede due parametri obbligatori e quattro opzionali. I parametri obbligatori sono:
- h-shadow: rappresenta la posizione orizzontale dell’ombra
- v-shadow: rappresenta la posizione verticale dell’ombra
dei valori positivi per queste proprietà indicano lo spostamento dell’ombra verso il basso rispetto al bordo superiore e inferiore del box e verso destra rispetto al bordo destro e sinistro. Invece, dei valori negativi indicano uno spostamento verso l’alto e verso sinistra.
Correggendo la regola di stile vista prima con valori negativi per h-shadow e v-shadow
div {
width: 220px;
padding: 5px;
background: #99CCFF;
box-shadow: -10px -10px 5px #888888;
}Così facendo otteniamo la figura che segue:
I parametri opzionali, invece, sono i seguenti:
- blur: indica la distanza dal bordo del box a cui inizia la sfocatura dell’ombra;
- spread: indica in pixel la dimensione dell’ombra;
- color: indica il colore dell’ombra;
- inset: indica se l’ombra deve essere interna (inset). Il valore predefinito, outset, crea un’ombra esterna;
Proviamo ad aumentare la sfocatura e la dimensione della nostra ultima ombra (negli esempi precedenti, in realtà, non avevamo specificato una dimensione, ma solo la sfocatura)
div {
width: 220px;
padding: 5px;
background: #99CCFF;
box-shadow: -10px -10px 15px 15px #888888;
}Ed ecco il risultato
Ombra interna al box con inset
Proviamo ora a portare l’ombra all’interno del box. Nella regola precedente, modifichiamo solo la proprietà box-shadow aggiungendo la keyword inset:
box-shadow: -10px -10px 15px 15px #888888 inset;
Notate che, con una ombra interna, i valori negativi per h-shadow e v-shadow creano l’ombra sui bordi destro e inferiore.
Creare un’ombra sui quattro lati del box
Per applicare l’ombra sui quattro lati bisogna porre a zero le proprietà h-shadow e v-shadow, quindi lavorare con blur e spread per gestire la dimensione dell’ombra e della sua sfocatura (anche in questo caso, proponiamo solo la modifica alla proprietà box-shadow).
box-shadow: 0px 0px 15px 10px #888888;Ed ecco il risultato.
