Aggiungere un'ombra ai box - GM Multimedia

Vai ai contenuti

Menu principale:

Aggiungere un'ombra ai box

HTML.HTML5.PHP CSS.CSS3.Javascript

          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.

  1. Dimensione in orizzontale dell'ombra;
  2. Dimensione in verticale dell'ombra;
  3. Raggio di sfumatura (a un valore maggiore, si avrà un maggiore effetto di sfumato);
  4. 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:
  1. colore della sfumatura;
  2. angolo di direzione della sfumatura (in gradi): i gradi girano in senso orario dal bordo superiore del box;
  3. 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°:
© - Copyright 2015. - Tutti i diritti riservati - G.M. Multimedia
Torna ai contenuti | Torna al menu