Effetto ombra su immagini con i CSS

Nell' articolo di oggi tratteremo lo stesso argomento ma al posto del testo avremo un' immagine. Basterà solo una fotografia oppure un qualsiasi file grafico e... un pò di codice CSS. Null' altro.

Un pò di spiegazione prima di scrivere il codice

Prima di passare alla scrittura vera e propria del codice, vorrei spiegare l' impostazione dell' esempio. Posto che ci si avvarrà dei posizionamenti assoluti e relativi, sarà importante racchiudere la foto e l' ombra in un elemento contenitore generale, che io ho nominato #container; all' interno di esso ne avremo altri 2: uno che racchiude la fotografia e che prende il nome di #foto e l' altro che conterrà l' ombra dal nome #foto.
Fatta questa piccola premessa, dobbiamo solo ricordarci le dimensioni in pixel della foto in quanto torneranno utili quando scriveremo il codice per il suo elemento contenitore; per quella usata nell' esempio le dimensioni sono: 500px X 300px.

Il codice CSS

Per prima cosa passiamo alla scrittura del codice del contenitore generale:

#container{
 margin:10px auto 0 auto;
 padding:0;
 width:600px;
 height:400px;
 background:transparent;
 position:relative;
 }  

Al contenitore generale ho dato una misura superiore rispetto a quella reale della foto; usare una misura differente rispetto a quella che ho impostato io non cambia assolutamente il risultato finale. Altro non mi pare ci sia da scrivere in merito a questo codice. Adesso passiamo al div che conterrà la foto.

#foto{
 margin:0;
 padding:0;
 width:500px;
 height:300px;
 background: url(2.jpg) left top no-repeat transparent;
 }  

L' unica cosa da osservare, e che ho scritto all' inizio, sono le dimensioni dell' elemento di blocco uguali a quelle dell' immagine usata. In questo caso l' ho inserita come sfondo. Per ultimo la scrittura del codice relativo al contenitore dell' ombra.

#ombra{
 margin:0;
 padding:0;
 width:500px;
 height:300px;
 position:absolute;
 top:5px;
 left:55px;
 background:#666;
 z-index:-1;
 }  

Questo è il codice più importante in quanto conferisce alla foto l' effetto voluto. Affinchè sotto la foto appaia l' ombra dobbiamo realizzare un #div di pari dimensioni dell' immagine; inoltre lo dobbiamo posizonare in modo tale da sembrare che la luce provenga da sinistra e dall' alto. Per fare in modo da avere altre posizioni per l' ombra, basterà modificare le misure di top e left. Per vedere l' ombra sotto la foto dobbiamo fare in modo che dall' alto essa venga "spostata" di 5 pixel. Per fare in modo che la stessa ombra fuoriesca dal lato destro, la posizione che essa deve assumere sarà di 55 pixel da sinistra. Spiego meglio questo passaggio.

Il contenitore generale ha una dimensione in larghezza pari a 600 pixel. Essendo la foto di 500 pixel in larghezza e dichiarando un allineamento al centro per il body [body {text-align:center;}], l' immagine avrà uno spazio sia da destra che da sinistra pari a 50 pixel. Stesso discorso vale per il div #ombra; se nn avessi dichiarato di "quanto" esso deve essere spostato, lo avremmo avuto perfettamente allineato con la foto; vale a dire che non solo si sarebbe posizionato sotto di essa ma non avremmo l' effetto dell' ombra.

Il colore di sfondo assegnato [background:#666;] che ho usato dá l' idea che la foto non è sollevata di molto da un ipotetico piano; motivo per cui ho utilizzato un colore grigio scuro. Per dare l' idea di una immagine più sollevata, si dovrebbe usare un grigio molto più leggero e spostare ulteriormente la misura dei pixel.
Inoltre l' ultimo rigo di codice [z-index:-1;] fa rimanere il div #ombra al di sotto del div #foto.

Questo è tutto quello che serve per dare alla fotografia l' effetto dell' ombra. Nella pagina di esempio si può vedere il risultato di quanto descritto fino ad ora.
Alla prossima.