CSS 3 – Aggiungere ombra a un div

Francesco PC Academy di - 18 Novembre 2013 in Altro, In evidenza, Web Design

Fino a qualche tempo fa per aggiungere un’ombra a un div bisognava ricorrere all’uso di file .png da inserire come sfondo del div.

Oggi con le regole CSS 3 si può ottenere lo stesso effetto facendo uso del tag box-shadow, vediamo nel dettaglio le diverse possibilità:

1. Il comando base per inserire un’ombra ad un box del nostro sito:

div {
  box-shadow: 7px 7px 5px #dedede;
}
  • Il primo valore è riferito alla dimensione orizzontale dell’ombra
  • Il secondo alla dimensione verticale dell’ombra
  • Il terzo al raggio di sfocatura vogliamo dare alla nostra ombra, più sarà elevato il valore più l’ombra sarà sfumata
  • L’ultimo è il colore dell’ombra.

ombra1

 

Come vedete l’ombra si estende verso destra e verso il basso, se userete valori negativi (- 7px, -7px) si estenderà verso l’alto e verso sinistra.

2. Per ottenere un’ombra interna al box:

div {
  box-shadow: inset 10px 10px 5px #dedede;
}

 

ombra interna

3. Più ombre su uno stesso div:

Basta separare le regole con una virgola

div {
  box-shadow:  10px  10px 5px #dedede,
              -10px -10px 5px #dedede,
               10px -10px 5px #dedede,
              -10px  10px 5px #dedede;
}

ombra multipla

 

4. Compatibilità con gli altri browser:

div {
  /* ... */
  -moz-box-shadow:  10px  10px 5px #dedede;
  -webkit-box-shadow:  10px  10px 5px #dedede;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#dedede', Direction=135, Strength=10);
  box-shadow: 10px 10px 5px #dedede;
}

Il codice qui sopra è la dicitura corretta per permettere a tutti i browser di visualizzare la nostra ombra.

Firefox, Safari e Chrome fanno riferimento a questo comando:

 -moz-box-shadow:  
  -webkit-box-shadow:
Mentre filter: progid:DXImageTransform.Microsoft.Shadow è per richiamare il filtro che permette a Explorer di visualizzare l’ombra.
Share

Promozioni

Potrebbe interessarti

Fotografie di Persone, quali pubblicare
19 Aprile 2018

woocommerce sito

Esempi di siti ecommerce realizzati con woocommerce + wordpress
16 Marzo 2018

Non basta il Visual Composer per essere Web Designer
10 Maggio 2017



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti