CSS  »  Articoli  »  CSS 3 

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

Nota: le ombre multiple sono supportate a partire dalla versione 4.0 di Safari.

Lo zip contenente la pagina di esempio è disponibile per il download.

Altri articoli

Altre guide

Altre newsletter