Box shadow in css3. Come fare un ombra interna o esterna per un elemento block.

Proprietà box-shadow aggiunge ad un elemento una o più ombre. L'ombra è una copia del elemento, spostata a una distanza specificata. Le ombre possono essere esterni o interni, piatti o sfocati, possono anche seguire i contorni dei blocchi con angoli arrotondati. Con utilizzo della parola chiave inset vengono creati ombre al interno del elemento, rendendo elemento piu voluminoso o 3D.  

 

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.

ombra del blocco box-shadow

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

/*html */
<p class="example-shadow-1"><span></span></p>
  /*css*/
.example-shadow-1 {
  background: #e6e3df;
  text-align: center;
}
.example-shadow-1 span {
  margin: 50px;
  height: 100px;
  width: 200px;
  display: inline-block;
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

2.2. L'ombra piatta da un lato

/*html */
<p class="example-shadow-2"><a href="#btn">flat</a></p>
  /*css*/
.example-shadow-2 {
  background: beige;
  text-align: center;
}
.example-shadow-2 a  {
  display: inline-block;
  border-radius: 5px;
  padding: 15px 35px;
  font-size: 22px;
  margin: 20px;
  color: white;
  background: #55acee;
  box-shadow: 0 5px 0 #3C93D5;
}
.example-shadow-2 a:hover {
  background: #6FC6FF;
}

flat

2.3. Ombra dietro elemnto block

/*html */
<p class="example-shadow-3"><span></span></p>
  /*css*/
.example-shadow-3 {
  background: #e8e8e8;
  text-align: center;
}
.example-shadow-3 span {
  background: white;
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

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.

Letto 672 volte