Come Applicare un’Ombra utilizzando solamente Codice CSS

Oggi vogliamo parlarti degli effetti ombra che puoi applicare agli elementi sulle tue pagine web. Grazie alla proprietà CSS box-shadow ti basterà inserire pochissime righe di codice.

Esempio:

div {
  box-shadow: 15px 15px 15px #000;
}

I valori inseriti indicano:

• la dimensione in pixel dell’ombreggiatura in orizzontale;
• la dimensione in pixel dell’ombreggiatura in verticale;
• il raggio in pixel della sfumatura;
• il colore della sfumatura.

Ottenere l’effetto che desideri al primo tentativo è molto difficile, dovrai sbatterti un pò inserendo valori diversi per fare varie prove. Tuttavia c’è uno strumento interessante che ti può semplificare il lavoro.

CSSmatic

Il Tool in questione si chiama CSSmatic ed è stato sviluppato da Freepik. Vediamo insieme come utilizzarlo.

Andiamo sul sito cliccando qui. si aprirà una pagina dove a sinistra abbiamo i parametri da inserire e a destra un’anteprima in tempo reale.

Analizziamo in dettaglio i parametri:

1. Horizontal length e Vertical Legth
   Rispettivamente lunghezza orizzontale e lunghezza verticale. Serve a stabilire le dimensioni della nostra ombra.
2. Blur Radius e Spread Radius
   La prima serve a definire la sfocatura dell’ombra, mentre la seconda a definire la sua estensione.
3. Shadow Color
   Ci permette di selezionare il colore dell’ombra.
4. Background Color e Box Color
   Questi parametri si riferiscono al colore del box e il colore di sfondo. Puoi inserire i colori che intendi utilizzare sul tuo sito per valutare il contrasto tra box, ombra e sfondo.
5. Opacity
   Definisce l’opacità dell’ombra.
6. Outline / Inset
   Ci permette di definire la posizione dell’ombra. Outline per inserirla all’esterno del box e Inset per inserirla all’interno.

Una volta definiti i parametri potrai replicare l’effetto sul tuo elemento. Ti basterà copiare il testo generato all’interno del box e inserirlo nel codice css come nell’esempio seguente.

div {
  -webkit-box-shadow: 42px 25px 57px -15px rgba(0,0,0,0.68);
  -moz-box-shadow: 42px 25px 57px -15px rgba(0,0,0,0.68);
  box-shadow: 42px 25px 57px -15px rgba(0,0,0,0.68);
}

Come avrai notato, oltre alla proprietà box-shadow vengono specificate anche -webkit-box-shadow e -moz-box-shadow. Queste proprietà svolgono lo stesso ruolo di box-shadow e vengono inserite per ottimizzare la compatibilità con i vari Browser.

Fai attenzione a non distinguere la proprietà box-shadow con text-shadow. La prima infatti può essere applicata a tutti gli elementi html ad eccezione dei tag testuali.

Per applicare l’effetto ombra ai testi ti invito a dare un’occhiata a questo articolo.