ZANETTE
MARCO
CSS
Effetto ombra sui box con box-shadow css3
Grazie alla nuova proprietà box-shadow introdotta dai css3 è possibile ottenere un effetto ombra sui box
senza dover ricorrere all'utilizzo di immagini o altri div.
Attraverso la proprietà box shadow è possibile creare numerosi effetti, vediamo alcuni esempi su come utilizzarla.
- <div style="display:block; width:100px; height:100px; background-color:#F00; box-shadow: 10px 10px 5px 0 #888888;">
- </div>
In questo primo esempio ho creato una semplice ombra assegnando 4 volori alla proprietà box-shadow:
- il primo valore (10px) definisce lo spostamento orizzontale;
- il secondo valore (10px) definiscere lo spostamento verticale;
- il terzo valore (5px) definisce la sfocature dell'ombra (se impostata a 0 si otterrà un'ombra netta senza sfocatura)
- il quarto valore definisce la dimensione dell'ombra, se impostata a 0 l'ombra sarà grande quanto il box, mentre se viene assegnato un
valore l'ombra si espanderà o ridurrà, a seconda del valore assegnato, sia verticalmente che orizzontalmente;
- il quinto valore (#888888) definisce il colore dell'ombra.
Vediamo ora un'esempio nel quale userò anche il parametro per modificare la dimensione dell'ombra.
- <div style="display:block; width:100px; height:100px; background-color:#00f; box-shadow: 0px 10px 5px -5px #888888;">
- </div>
Come avete visto in questo esempio ho creato un'ombra di dimensioni ridotte assengnando al quarto parametro della proprietà
box-shadow un valore negativo (-5px).
Esiste anche la possibilità di creare un'ombra interna al box assegnando un sesto parametro stringa "inset" a box-shadow.
- <div style="display:block; width:100px; height:100px; background-color:#0f0; box-shadow: 10px 10px 5px 0px #888888 inset;">
- </div>
La proprietà box-shadow permette di assegnare più di un'ombra al box, specificando più serie di valori divisi da una virgola.
- <div style="display:block; width:100px; height:100px; background-color:#ff0; box-shadow: 10px 10px 5px 0px #888888,-10px -10px 5px 0px #ccc;">
- </div>
Come vedete in questo esempio ho creato 2 ombre assegnando come parametri della proprietà box shadow 2 serie di valori divisi
da virgola (box-shadow: 10px 10px 5px 0px #888888,-10px -10px 5px 0px #ccc;).
Ricordo infine che in Internet Explorer box-shadow è supportato solo dalla versione 9.