Uno degli effetti più interessanti introdotti nello standard CSS3 è l’ombreggiatura degli elementi. Con una semplice dichiarazione nel foglio di stile ci possiamo evitare tutta la fatica con le PNG trasparenti a 32bit, le alchimie con il padding e tutti gli archibugi che voi, come me, avete dovuto affrontare sino ad ora.

In questo esempio semplicissimo applicheremo un’ombra ad un blocco DIV:

<div class="boxombra">...</div>


Nel CSS andremo a dichiarare:

.boxombra {
box-shadow: 5px 5px 10px #000;
}

E questo basterebbe per tutti i browser moderni. Ma… c’è pure da tenere presente Explorer che, guarda caso, è il solito “fratello scemo”. Per provare a far funzionare l’ombreggiatura sulle versioni future di IE (si parla addirittura di attendere la versione 10.5!) andremo ad aggiungere:

-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;

I valori che vedete sono, nell’ordine: l’offset verticale, l’offset orizzontale, il livello di sfumatura dell’ombra e, infine, il colore esadecimale dal quale originare l’ombra.

Un commento per “Applicare ombre ai box usando il CSS3”

1. renato il 31 Ottobre 2011 20:10

   Grazie per le informazioni, Luca.
   Purtroppo confermo che su IE7 e IE8 non funziona.

Inserisci il tuo commento!