HTML5 - Box Shadow

Questa è una delle caratteristiche più attese del nuovo standard di CSS3 e che in combinazione con HTML5 riesce ad attirare molti sguardi, ci riferiamo al Scatola ombra chi ci permette di posizionare le ombre sulle scatole nel nostro documento HTML, generando così un effetto come se fluttuasse sulla pagina.
L'elemento Box Shadow deve essere costituito come segue:
box-shadow: hoffset voffset sfocatura diffusione colore inserto
Laddove ciascuno dei suoi attributi svolge una funzione, vediamo ciascuno di questi in dettaglio:

• Hoffset: È l'offset orizzontale, che è un valore di lunghezza. Un valore positivo sposta il Scatola ombra a destra, invece, un valore negativo sposta a sinistra il Box Shadow.

• Voffset: È l'offset verticale, che è un valore di lunghezza. Un valore positivo sposta l'ombra della scatola sotto la scatola dell'oggetto e un valore negativo sposta l'ombra della scatola sopra la scatola dell'oggetto.

• Sfocatura: (Facoltativo) specifica il raggio della definizione dell'ombra, che è un valore di lunghezza. Più alto è il valore, più sfocato rimane il bordo della casella dell'elemento. Per il valore predefinito 0, il bordo dell'ombra del riquadro sembra completamente definito.

• Stendere: (Facoltativo) Specificare il raggio di diffusione dell'ombra, è una misura della lunghezza. Un valore positivo provoca l'espansione dell'ombra in tutte le direzioni del riquadro dell'elemento contenitore, mentre un valore negativo provoca la contrazione dell'ombra dell'elemento contenitore.

• Colore: (Facoltativo) È il colore dell'ombra. Se viene omesso, il browser deciderà il colore.

• Riquadro: (Facoltativo) Proietta l'ombra all'interno del riquadro dell'elemento a cui è applicata.

Una volta che conosciamo gli attributi, passiamo rapidamente a un esempio di codice per mettere in pratica ciò che abbiamo imparato.

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Come possiamo vedere possiamo applicare il Scatola ombra Nel CSS all'interno del tag style, questo codice genera il seguente risultato:

Un altro aspetto interessante è che nella stessa dichiarazione di un Box Shadow possiamo specificare più ombre, ad esempio, nel codice seguente andremo ad includere un'ombra aggiuntiva nell'inset, vediamo:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Ora vediamo come vengono visualizzate entrambe le ombre nel nostro elemento: