Ombra sui box con i CSS3

Link copiato negli appunti

Se si guarda agli effetti visivi, la proprietà box-shadow introdotta nei CSS3 è forse, insieme a border-radius, quella più utile: con poche righe di codice CSS consente di ottenere un effetto di indubbia efficacia senza dover ricorrere a immagini, div aggiuntivi, hack di vario genere.

Al momento in cui scriviamo questo articolo, sembra incredibile a dirsi, la proprietà box-shadow non ha ancora trovato una sua collocazione definitiva nella specifica CSS3. Inizialmente inserita nel contesto del modulo riservato a bordi e sfondi, è in attesa di trovare un suo spazio in questo o in qualche altro modulo. Il tutto nonostante un supporto cross-browser più he adeguato, che, con l'eccezione di Internet Explorer, si estende a tutte le più recenti versioni degli altri browser.

Definire l'ombreggiatura per un box

box-shadow può essere applicata a tutti gli elementi. La sintassi di base prevede la definizione di quattro valori: uno per il colore dell'ombra, gli altri tre per l'estensione della stessa. Vediamola subito in azione nel primo degli esempi presentati in questa pagina, il box identificato come Box 1. Ecco il codice CSS (al solito, si noti la necessità di usare i prefissi -moz- e -webkit- per i browser basati, rispettivamente su Mozilla e WebKit; Opera implementa la proprietà nella sua forma standard):

#box1 {
	background: rgb(238, 238, 238);
	width:200px;
	padding: 10px;
	-moz-box-shadow:5px 5px 2px #333333;
	-webkit-box-shadow:5px 5px 2px #333333;
	box-shadow:5px 5px 2px #333333;
}

Il primo valore (5px) imposta lo spostamento dell'ombra in senso orizzontale. Essendo il valore positivo, l'ombra viene collocata sul lato destro del box.

Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l'ombra viene collocata sul lato inferiore del box.

Il terzo valore (2px) definisce il livello di sfocatura dell'ombra: più alto è questo valore, più sfocata apparirà l'ombra. Si usi 0 se si desidera un'ombra netta e senza sfocatura.

L'ultimo valore (#333333), imposta il colore dell'ombra.

Proviamo a usare valori negativi. Lo abbiamo fatto sul Box 2. Il codice:

#box2 {
	background: rgb(238, 238, 238);
	width:200px;
	padding: 10px;
	-moz-box-shadow:-5px -5px 2px #333333;
	-webkit-box-shadow:-5px -5px 2px #333333;
	box-shadow:-5px -5px 2px #333333;
}

Come si vede, se si usano numeri negativi per i valori relativi allo spostamento orizzontale e verticale, l'ombra sarà collocata, rispettivamente, a sinistra e in alto.

Mozilla/Firefox e Opera supportano anche un quarto possibile valore numerico: il cosiddetto spread radius. Quello che si ottiene, usando un valore positivo, è un leggero ingrandimento dell'ombra. Si noti, usando Firefox 3.5+ e Opera 10.5+, la differenza del Box 3 rispetto a Box 1 (francamente roba di poco conto, usare questo valore è per certi versi inutile). Ecco il codice:

#box3 {
	background: rgb(238, 238, 238);
	width:200px;
	padding: 10px;
	-moz-box-shadow:5px 5px 2px 2px #333333;
	-webkit-box-shadow:5px 5px 2px 2px #333333;
	box-shadow:5px 5px 2px 2px #333333;
}

Più interessante, invece, l'effetto che si può ottenere settando a 0 i valori per lo spostamento orizzontale e per quello orizzontale, e definendo nel contempo un valore elevato per la sfocatura. È quanto abbiamo fatto sul Box 4 con questo codice:

#box4 {
	background: rgb(238, 238, 238);
	width:200px;
	padding: 10px;
	-moz-box-shadow: 0 0 25px #333333;
	-webkit-box-shadow:0 0 25px #333333;
	box-shadow: 0 0 25px #333333;
}

È anche possibile definire più ombre. In tal caso la definizione dei valori per ciascuna va separata attraverso l'uso della virgola. Sul Box 5 abbiamo aggiunto all'ombra grigio scuro fin qui usata una seconda ombra verde. Ecco il codice:

#box5 {
	background: rgb(238, 238, 238);
	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;
}

Con l'uso di questa caratteristica ci si può spingere molto in avanti, fino ad arrivare a cose come quella visibile nel Box 6, il cui codice è tratto dall'articolo Fun With Box Shadows, articolo che consigliamo vivamente per esplorare le tante possibilità creative che è possibile sfruttare con box-shadow (magari dando un'occhiata anche alla pagina delle demo).

Interessante questo tool creato da John Allsopp e che consente di craere e verificare dal vivo l'applicazione dell'effetto su un box.

Chiudiamo con solita tabella della compatibilità sui vari browser:


Non supportata	Firefox 3.5 e versioni superiori	*Safari 3.0 e versioni successive ()**	Chrome 1.0 e versioni successive	Opera 10.5 e versioni successive