CSS  »  Articoli  »  CSS 3 

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;
}

Altri articoli

Altre guide

Altre newsletter