Se si guarda agli effetti visivi, la proprietà box-shadow introdotta nei CSS3 è forse, insieme a border-radius, quella più utile: con poche righe di codice CSS consente di ottenere un effetto di indubbia efficacia senza dover ricorrere a immagini, div aggiuntivi, hack di vario genere.
Al momento in cui scriviamo questo articolo, sembra incredibile a dirsi, la proprietà box-shadow non ha ancora trovato una sua collocazione definitiva nella specifica CSS3. Inizialmente inserita nel contesto del modulo riservato a bordi e sfondi, è in attesa di trovare un suo spazio in questo o in qualche altro modulo. Il tutto nonostante un supporto cross-browser più he adeguato, che, con l'eccezione di Internet Explorer, si estende a tutte le più recenti versioni degli altri browser.
Definire l'ombreggiatura per un box
box-shadow può essere applicata a tutti gli elementi. La sintassi di base prevede la definizione di quattro valori: uno per il colore dell'ombra, gli altri tre per l'estensione della stessa. Vediamola subito in azione nel primo degli esempi presentati in questa pagina, il box identificato come Box 1. Ecco il codice CSS (al solito, si noti la necessità di usare i prefissi -moz- e -webkit- per i browser basati, rispettivamente su Mozilla e WebKit; Opera implementa la proprietà nella sua forma standard):
Il primo valore (5px) imposta lo spostamento dell'ombra in senso orizzontale. Essendo il valore positivo, l'ombra viene collocata sul lato destro del box.
Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l'ombra viene collocata sul lato inferiore del box.
Il terzo valore (2px) definisce il livello di sfocatura dell'ombra: più alto è questo valore, più sfocata apparirà l'ombra. Si usi 0 se si desidera un'ombra netta e senza sfocatura.
L'ultimo valore (#333333), imposta il colore dell'ombra.
Proviamo a usare valori negativi. Lo abbiamo fatto sul Box 2. Il codice:
Come si vede, se si usano numeri negativi per i valori relativi allo spostamento orizzontale e verticale, l'ombra sarà collocata, rispettivamente, a sinistra e in alto.
Mozilla/Firefox e Opera supportano anche un quarto possibile valore numerico: il cosiddetto spread radius. Quello che si ottiene, usando un valore positivo, è un leggero ingrandimento dell'ombra. Si noti, usando Firefox 3.5+ e Opera 10.5+, la differenza del Box 3 rispetto a Box 1 (francamente roba di poco conto, usare questo valore è per certi versi inutile). Ecco il codice:
Più interessante, invece, l'effetto che si può ottenere settando a 0 i valori per lo spostamento orizzontale e per quello orizzontale, e definendo nel contempo un valore elevato per la sfocatura. È quanto abbiamo fatto sul Box 4 con questo codice:
È anche possibile definire più ombre. In tal caso la definizione dei valori per ciascuna va separata attraverso l'uso della virgola. Sul Box 5 abbiamo aggiunto all'ombra grigio scuro fin qui usata una seconda ombra verde. Ecco il codice
Con l'uso di questa caratteristica ci si può spingere molto in avanti, fino ad arrivare a cose come quella visibile nel Box 6, il cui codice è tratto dall'articolo Fun With Box Shadows, articolo che consigliamo vivamente per esplorare le tante possibilità creative che è possibile sfruttare con box-shadow (magari dando un'occhiata anche alla pagina delle demo).
Interessante questo tool creato da John Allsopp e che consente di craere e verificare dal vivo l'applicazione dell'effetto su un box.
Fonte
Html.it
Al momento in cui scriviamo questo articolo, sembra incredibile a dirsi, la proprietà box-shadow non ha ancora trovato una sua collocazione definitiva nella specifica CSS3. Inizialmente inserita nel contesto del modulo riservato a bordi e sfondi, è in attesa di trovare un suo spazio in questo o in qualche altro modulo. Il tutto nonostante un supporto cross-browser più he adeguato, che, con l'eccezione di Internet Explorer, si estende a tutte le più recenti versioni degli altri browser.
Definire l'ombreggiatura per un box
box-shadow può essere applicata a tutti gli elementi. La sintassi di base prevede la definizione di quattro valori: uno per il colore dell'ombra, gli altri tre per l'estensione della stessa. Vediamola subito in azione nel primo degli esempi presentati in questa pagina, il box identificato come Box 1. Ecco il codice CSS (al solito, si noti la necessità di usare i prefissi -moz- e -webkit- per i browser basati, rispettivamente su Mozilla e WebKit; Opera implementa la proprietà nella sua forma standard):
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l'ombra viene collocata sul lato inferiore del box.
Il terzo valore (2px) definisce il livello di sfocatura dell'ombra: più alto è questo valore, più sfocata apparirà l'ombra. Si usi 0 se si desidera un'ombra netta e senza sfocatura.
L'ultimo valore (#333333), imposta il colore dell'ombra.
Proviamo a usare valori negativi. Lo abbiamo fatto sul Box 2. Il codice:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Mozilla/Firefox e Opera supportano anche un quarto possibile valore numerico: il cosiddetto spread radius. Quello che si ottiene, usando un valore positivo, è un leggero ingrandimento dell'ombra. Si noti, usando Firefox 3.5+ e Opera 10.5+, la differenza del Box 3 rispetto a Box 1 (francamente roba di poco conto, usare questo valore è per certi versi inutile). Ecco il codice:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Interessante questo tool creato da John Allsopp e che consente di craere e verificare dal vivo l'applicazione dell'effetto su un box.
Fonte
Html.it
