Con CSS3 gli sfondi ed i bordi possono usufruire di una nuova proprietà, chiamata box-shadow, che attualmente è stata implementata in Safari 3+, Firefox 3.1 (Alpha) e Google Chrome.
La proprietà accetta 3 lunghezze ed un colore come attributi; le lunghezze sono:
- il rientro orizzontale dell’ombra: un valore positivo indica che l’ombra si trova a destra del contenitore, mentre un valore negativo a sinistra.
- il rientro verticale dell’ombra: un valore positivo indica che l’ombra si trova sotto al contenitore, mentre un valore negativo sopra.
- l’entità della sfocatura dell’ombra: maggiore è questo valore, più l’ombra risulterà sfocata.
L’ombra, inoltre, dovrebbe seguire gli angoli arrotondati creati con la proprietà border-radius.
Dovrebbe esserci un’ombra grigia sotto questo contenitore…
Il CSS per questo effetto è:
-moz-box-shadow: 10px 10px 5px #888; /* Firefox 3.1+ */
-webkit-box-shadow: 10px 10px 5px #888; /* Safari 3.0+, Chrome */
box-shadow: 10px 10px 5px #888; /* Opera 10.5, IE 9.0 */
-webkit-box-shadow: 10px 10px 5px #888; /* Safari 3.0+, Chrome */
box-shadow: 10px 10px 5px #888; /* Opera 10.5, IE 9.0 */
Dovrebbe esserci un’ombra nera e definita sopra questo contenitore e l’ombra dovrebbe seguire la curvatura degli angoli…
Ed il CSS è:
-moz-box-shadow:-10px -10px 0 #000000;/* Firefox 3.1+ */
-moz-border-radius:5px 5px 5px 5px;
-webkit-box-shadow: 10px 10px 5px #888; /*Safari 3.0+, Chrome */
-webkit-border-radius:5px 5px 5px 5px;
box-shadow: 10px 10px 5px #888; /* Opera 10.5, IE 9.0 */
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-box-shadow: 10px 10px 5px #888; /*Safari 3.0+, Chrome */
-webkit-border-radius:5px 5px 5px 5px;
box-shadow: 10px 10px 5px #888; /* Opera 10.5, IE 9.0 */
border-radius:5px 5px 5px 5px;
Per chi non è in grado di vedere il risultato, ecco gli screenshot dei due esempi:
Tag: box-shadow, css3, w3c