CSS: box-shadow

La proprietà box-shadow e la proprietà border-radius introdotte con i CSS3 consentono di dare particolari effetti al layout di un sito web.

box-shadow può essere applicata a tutti gli elementi, e provvede a fornire all’elemento un effetto ombra.

box-shadow: 5px 10px 15px 20px #FFD700;

Il primo valore (5px) imposta lo spostamento dell’ombra in senso orizzontale. Un valore positivo, colloca l’ombra sul lato destro del box. Un valore negativo colloca l’ombra sul lato sinistro.
Il secondo valore (10px) imposta lo spostamento dell’ombra in senso verticale. Un valore positivo colloca l’ombra sul lato inferiore del box. Un valore negativo colloca l’ombra sul lato superiore del box.
Il terzo valore (15px) definisce il livello di sfocatura (blur radius) dell’ombra: più alto è questo valore, più sfocata apparirà l’ombra. 0 (zero) per un’ombra netta e senza sfocatura. Non sono ammessi valori negativi.
Il quarto valore (20px) imposta il livello di diffusione (spread radius) dell’ombra. Più i valori sono alti, più l’ombra tenderà ad espandersi, in tutte le direzioni. Con valori negativi l’ombra tende a contrarsi, fino a scomparire del tutto.

Di questi quattro valori, gli unici obbligatori sono i primi due. I valori della sfocatura e della diffusione, invece, possono essere omessi. Se non specificati, tali valori sono pari per default a 0 (zero).

Il quinto valore (#FFD700) indica il colore dell’ombra.

E’ possibile indicare un sesto valore che consente di posizionare l’ombra all’interno dell’elemento: il valore è insert.

box-shadow: 5px 10px 15px 20px #FFD700 insert;

 

E’ possibile definire più effetti ombra contemporaneamente; in questo caso la definizione dei valori per ciascuna va separata attraverso l’uso della virgola:

box-shadow: 10px 20px 30px 2px #30F744, 5px 10px 15px 20px #FFD700;

 

Queste proprietà sono rese alla perfezione in tutte le versioni più recenti dei principali browser: Internet Explorer 9, Firefox 4, Safari 5, Chrome 10.0+, Opera 10.5+.
Non sono supportate nelle versioni precedenti alla 9.0 di Internet Explorer
Per le versioni precedenti di Firefox, Safari e Chrome, invece, è necessario far precedere i nomi delle proprietàdai prefissi proprietari -moz- (per Firefox) e -webkit- (per Safari e Chrome):

-webkit-box-shadow: 5px 10px 15px 20px #FFD700;
-moz-box-shadow: 5px 10px 15px 20px #FFD700;
box-shadow: 5px 10px 15px 20px #FFD700;

 

Articoli correlati: