Aggiungere un'ombra ai box

Per aggiungere un'ombra ad un box, fino ad oggi abbiamo sempre aggiunto un'immagine di background al box..

Oggi però i CSS3 hanno proposto una nuova regola, "box-shadow". Con box-shadow possiamo aggiungere una o più ombre al box. Utilizzando una keyword specifica possiamo aggiungere l'ombra al box, non solo all'esterno ma anche all'interno

La sintassi di base è la seguente:

1

box-shadow: 20px 20px 10px #666666;

Il significato degli attributi.

Dimensione in orizzontale dell'ombra;
Dimensione in verticale dell'ombra;
Raggio di sfumatura (a un valore maggiore, si avrà un maggiore effetto di sfumato);
Colore della sfumatura.

La sfumatura parte dal bordo superiore sinistro del box e si estendono verso destra e verso il basso. Assegnando invece valori negativi, la sfumatura si estenderà verso sinistra e verso l'alto.

Esempio di quanto detto sopra:

Box con ombra e bordo

Ombra interna al box.

Come detto sopra e possibile creare un'ombra anche all'interno del box. Utilizzando la keyword inset, l'effetto viene renderizzato all'interno del box.

La sintassi con la nuova keyword:

1

box-shadow: inset 10px 10px 5px #666666;

Il risultato, in questo caso, sarà il seguente:

Box con ombra interna e bordo

Ombre multiple

Un'altra caratteristica molto significativa di box-shadow è la possibilità di creare più di un'ombra al box, all'interno della stessa regola separandole con una virgola.

Codice ombre multiple

1

2

3

4

box-shadow: 10px 10px 5px #666666,

-10px -10px 5px #666666,

10px -10px 5px #666666,

-10px 10px 5px #666666;

Il risultato ottenuto:

Box con ombre multiple e bordo

Come ottenere il cross browser

La proprietà box-shadow, al momento della stesura di questo tutorial, è supportata nativamente solo da Opera e dalla versione IE9. Però gli altri browser, Internet Explorer nelle versioni precedenti alla 9 compreso, forniscono un'alternativa per aggiungere l'ombra ai box.

Firefox, Safari e Chrome utilizzano il classico suffisso propietario: –moz- e –webkit-:

codice di esempio:

1

2

-moz-box-shadow: 10px 10px 5px #666666;

-webkit-box-shadow: 10px 10px 5px #666666;

Internet Explorer (fino alla versione 8) necessita di uno dei suoi filtri:

1

2

filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666',

Direction=135, Strength=10);

Il filtro Shadow prende tre parametri, in sequenza:

colore della sfumatura;
angolo di direzione della sfumatura (in gradi): i gradi girano in senso orario dal bordo superiore del box;
dimensione della sfumatura.

Pertanto il codice necessario per tutti i browser è il seguente:

1

2

3

4

5

-moz-box-shadow: 10px 10px 5px #666666;

-webkit-box-shadow: 10px 10px 5px #666666;

filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666',

Direction=135, Strength=10);

box-shadow: 10px 10px 5px #666666;

Visitatori online:

Sei il nostro visitatore n°:

Aggiungere un'ombra ai box - GM Multimedia

Aggiungere un'ombra ai box