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 1221 volte

Potrebbe interessarti

Altro in questa categoria: « Come creare una cornice 3d per una immagine soltanto coi CSS Belli gradienti coi CSS »

Torna in alto

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso

Trova per argomento!

Ti è piaciuto? Condividi su social!