Box Shadow e Box Shadow Inset con CSS3

Oggi impariamo ad usare due regole CSS3 molto usate per abbellire i nostri amati div! Vediamo insieme come utilizzare le proprietà box-shadow e box-shadow inset, cercando di rispettare la compatibilità con quasi tutti i browser possibili!

Box Shadow

Come prima cosa questa proprietà può essere usata per creare un effetto ombra all’esterno oppure all’interno di un elemento contenitore, che può essere un div, un li, un ul o altro. Ecco un esempio di codice compatibile con la maggior parte dei browser per realizzare una ombra esterna:

.esempio {
box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
-o-box-shadow: 0px 0px 10px #000;
}

Questo è quello che otteniamo nei browser che supportano la funzione:

Come vedete il box viene circondato da una ombra, ma cerchiamo di capire bene il codice e subito vi spiego la sintassi e perché vengono usate più proprietà anziché una sola:

• -box-shadow si usa come regola generale e va sempre inserita
• -webkit-box-shadow si usa per i browser come Chrome e Safari
• -moz-box-shadow si usa solo per Firefox
• -o-box-shadow si usa solo per Opera

Va detto che per Internet Explorer verrà usata la proprietà box-shadow con la versione 9 e a quanto pare le ultime versioni di Firefox interpretano la regola -box-shadow anziché la -moz-shadow.

Il linguaggio esegue un certo ordine, infatti abbiamo i valori come nell’esempio 0px 0px 10px #000 che stanno rispettivamente a:

• 0px asse orizzontale
• 0px asse verticale
• 10px espansione dell’ombra
• #000 il colore

Va sempre rispettato questo ordine, infatti se impostiamo la seguente regola:

.esempio { -box-shadow: 5px 5px 10px #000;  }

Otteniamo questo risultato:

Box Shadow Inset

Ecco un esempio corretto per applicare un effetto di ombra interno:

.esempio {
box-shadow: inset 10px 10px 10px #000;
-webkit-box-shadow: inset 10px 10px 10px #000;
-moz-box-shadow: inset 10px 10px 10px #000;
-o-box-shadow: inset 10px 10px 10px #000;
}

Ecco il risultato:

Utilità

Ora che avete capito il meccanismo su come inserire le ombre, potete sbizzarrirvi come più vi pare, ma se volessimo dare una opacità alle nostre ombre cosa dovremmo inserire? Ecco un pratico esempio che sfrutta la soluzione con valori RGBA:

.esempio {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.333333);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.333333);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.333333);
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.333333);
}

Come vedete nell’esempio i valori dell’ombra vanno sempre inseriti con il loro ordine, invece per il colore si sfrutta il valore Alpha per l’opacità, ecco come usarlo come da esempio:

• 0, 0, 0, sono i valori per il colore #000000 che vanno cambiati in base al vostro colore scelto
• 0.333333 è l0pacità

Se impostiamo come valore per l’opacità 0.667788 otteniamo un tono più scuro.

Compatibilità

Ecco una tabella riassuntiva che può aiutarvi a capire quali browser supportano tale funzione