• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Ignazio96

Utente Guru
Autore del topic
User Legend
9 Marzo 2008
10.985
155
Miglior risposta
0
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):



Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
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:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
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:


Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
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:


Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
È 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


Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
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
 
  • Like
Reactions: 1 person
L'ho provato e funziona bene.

ho provato a mettere l'ombra ad un box con i bordi arrotondati, in un primo momento non funzionava ma bastava mettere prima l'ombra e dopo i bordi arrotondati. *-*
 
30092010_143227.png

html:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

CSS:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!