CSS3 Box Shadow: ombra senza immagini
lunedì 10 Gennaio 2011
Continua la rubrica Proprietà CSS3 nel mio blog, nel quale ogni mese pubblicherò una nuova funzione CSS3 per abbellire e alleggerire il vostro sito.
La proprietà CSS3 che analizzerò oggi è: box-shadow, permette di ombreggiare box o qualsiasi altro elemento senza bisogno di immagini.
Vediamo subito come si presenta:
Sintassi e definizione di box-shadow
Di seguito la semplice definizione della sintassi dei CSS per la proprietà box-shadow per la compatibilità dei browser in questione:
| CSS3 | Mozilla | WebKit |
|---|---|---|
| box-shadow | -moz-box-shadow | -webkit-box-shadow |
Alcuni esempi di Box Shadow
La proprietà box-shadow permette anche di assegnare la larghezza, la sfocatura e il colore dell’ombra:
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
Inner Shadow
Con la proprietà inner shadow è possibile visualizzare l’ombra all’interno del box, vediamo un’esempio:
-webkit-box-shadow:inset 0 0 20px #000000;
box-shadow:inset 0 0 20px #000000;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
Ombreggiatura colorata
Con questa proprietà è possibile colorare l’ombra all’interno del box, vediamo un’esempio:
-webkit-box-shadow: 0 0 20px #3399FF;
box-shadow: 0 0 20px #3399FF;