Come aggiungere ombre a oggetti e a testo con il CSS.

Come inserire delle ombre agli oggetti e al testo usando solo il CSS3 e i tag box-shadow e text-shadow.

L'introduzione del nuovo linguaggio CSS3 ha nella gestione delle ombre una delle novità più interessanti. In precedenza per mostrare una ombreggiatura doveva crearla con un programma di grafica per poi inserire l'immagine come background. Fino a poco tempo fa i tag relativi a questa proprietà erano supportati nativamente solo da Opera ma con i recenti aggiornamenti praticamente tutti i browser supportano le ombre e non è più necessario inserire il tag box-shadow preceduto dall'indicazione del browser come -moz-box-shadow per Firefox e -webkit-box-shadow per Chrome.

Facciamo degli esempi pratici per mostrare come debbono essere inseriti questi tag. Partiamo da un semplice rettangolo di larghezza 300 pixel e altezza 200 pixel con un bordo continuo di spessore di 1 pixel. I tag per l'ombreggiatura sono stati colorati di viola

<style>
.contenitore {
width:300px;
height:200px;
background-color:orange;
border: 1px solid #111;
box-shadow: 10px 12px 14px #a63800;
}
</style>
<div class="contenitore"></div>

Se si incolla questo codice in una pagina web ecco quello che sarà il risultato

con l'ombra che si visualizzerà in basso e a destra. Vediamo uno per uno che cosa comportano i vari parametri inseriti insieme al tag box-shadow

1. 10px rappresenta la lunghezza orizzontale dell'ombra
2. 12px rappresenta la lunghezza verticale dell'ombra
3. 14px è invece il raggio di sfumatura dell'ombra. A numeri più grandi corrisponde più sfumatura
4. #a63800 è invece il colore dell'ombra e possono anche essere usati i nomi inglesi dei colori

Se si inseriscono valori negativi nei due parametri che determinano la lunghezza dell'ombra in questo modo box-shadow: -10px -10px 12px #a63800; si ottiene questo risultato

con l'ombreggiatura in alto e a sinistra. Si può naturalmente mettere un valore positivo e uno negativo per scegliere i due lati adiacenti in cui visualizzare l'ombra. Se si mette un valore 0 si vedrà l'ombra su tre lati mentre con due 0 l'ombra sarà sui quattro lati.

OMBRE INTERNE 

 

Usando il tag inset è possibile mostrare l'ombra internamente all'oggetto. La riga box-shadow: inset 10px 10px 12px #a63800; inserita nel codice di inizio post produce questo risultato

 

OMBREGGIATURA DEL TESTO

 

I tag precedenti oltre che essere utilizzati in un caso particolare come quello già visto dei bottoni generici e dei bottoni specifici per i commenti di Blogger oppure essere inseriti nel modello per aggiungere la ombreggiatura a tutti gli elementi che abbiano lo stesso selettore.

Vediamo come si possa aggiungere l'ombreggiatura anche a un testo partendo da un esempio

<style>
.contenitore {
width:200px; height:80px;
background-color:orange;
border: 1px solid #111;
box-shadow: 5px 5px 10px #a63800; 
 color:#036;
 text-align:center; /*Per centrare il testo*/
 font-size:24px; /* Dimensioni font */
 text-shadow: 2px 2px 4px #024;
line-height:65px; /*Per centrare verticalmente*/
}
</style>
<div class="contenitore">Testo ombreggiato</div>

che è lo stesso già visto ma in cui si è aggiunto del testo centrato orizzontalmente e verticalmente.

I tag che determinano l'ombreggiatura del testo sono evidenziati di giallo e hanno come attributo text-shadow. Gli altri parametri hanno la stessa funzione di box-shadow quindi i primi due servono per la dimensione orizzontale e verticale dell'ombra (si possono usare anche numeri negativi), il terzo determina il raggio di sfumatura mentre il quarto è il codice del colore. Chi è alle prime armi può consultare il mio ebook Guida all'HTML e al CSS che può essere scaricato gratuitamente.