Come creare un ombra utilizzando la proprietà box-shadow
1. Principali parametri di box-shadow
Ogni ombra puo avere da uno a cinque parametri: offset(spostamento) orizzontale, offset verticale, raggio di sfocatura (valore opzionale) campo di diffusione (valore opzionale) e colore del ombra . Ombre non influiscono sulla composizione e possono coprire gli elementi vicini o le loro ombre. La proprietà non si ereditata.
box-shadow | |
---|---|
Valore: | |
x-offset | Valore obbligatorio. Spostamento del ombra in orizzontale rispetto il blocco. Puo avere valori positivi e negativi, valore positivo sposta l'ombra a destra dal blocco e negativo a sinistra. |
y-offset | Valore obbligatorio. Spostamento del'ombra in verticale rispetto il blocco. Puo avere valori positivi e negativi. Valore positivo indica sposatamento verso basso e quello negativo verso alto. |
blur | Valore opzionale. Definisce raggio di sfocatura del ombra. Piu grande è il raggio piu sfumata sara l'ombra. Si possono usare solo valori positivi./td> |
espansione | Valore opzionale, allarga l'ombra, consolidando la parte centrale di ombra fra le parti sfumati. Puo asumere valori positivi e negativi. Come valore si possa utilizzare qualsiasi valore di lungezza come per esempio px e altri |
colore | Valore opzionale. Da deffault la ombra è di colore nero.Per impostare altro colore si possa utlizzare seguenti forme della codifica dei colori: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Per Safari e obbligatorio indicare colore. |
inset | Crea ombra al interno del blocco. |
none | Valore di default. Indica assenza del ombra. |
initial | Imposta valore di default come valore della proprieta. |
inherit | Eredita valore dal elemento genitore. |
2. Esempi di ombre per elementi block.
2.1. l'ombra interna con box-shadow
2.2. L'ombra piatta da un lato
2.3. Ombra dietro elemnto block
3.Effetti con ombra al passaggio del mouse hover
Effeto 1Effeto 2Effeto 3Effeto4
4. Animazione del ombra
E alla fine vorrei notare che con IE ci sono dei problemmi nelle versioni 6-9.