Effetti ombra alternativi sulle immagini con gli stili CSS

Autore Originale: Alessandro Fulciniti
Publicato su: HTLM.IT

Le immagini sono un aspetto essenziale di un sito, e presentarle bene non può far altro che rendere il sito più piacevole ed efficace sotto l'aspetto visivo e comunicativo. Così, dopo le immagini con effetto cornice torniamo sull'argomento, con due modi accattivanti di presentare miniature, fotografie e immagini in generale. Ecco uno screenshot dei due esempi che realizzeremo:

Si tratta di due modi alternativi di presentare immagini rispetto alle drop-shadow, che mi è capitato in diverse occasioni di notare in rete. Vedremo in questo articolo come sia possibile ottenere un effetto simile sia sulle immagini singole che sulle gallerie di miniature. Cominciamo subito.

Immagine singola con ombra
Eccoci quindi al nostro primo esempio, una miniatura singola con un'ombra inferiore tale da conferirle un effetto stile "foglio arricciato sugli angoli". Il markup è molto semplice: si tratta di racchiudere l'immagine in un div con class="pic":

Per la parte grafica, nell'esempio si è utilizzata una sola immagine di sfondo, larga 90 pixel e alta 12, che riporto ingrandita qui di seguito:

Figura 2 - Ingrandimento dello sfondo

Ora procediamo con il CSS. In sostanza si tratta di due semplici regole in cui:

Si renderà float il div class="pic" così da fargli assumere la larghezza necessaria per contenere l'immagine
Si attribuirà un padding inferiore al div contenitore, così da lasciare spazio per l'immagine per l'effetto ombra
Si renderà display:block l'immagine, assegnandole poi un padding, un colore di sfondo e un bordo di un pixel.
Ecco quindi le due regole chiave dell'esempio:

Il nostro esempio è quindi ultimato: sono bastate una sola immagine e due regole CSS per ottenere una miniatura molto accattivante, che ha una resa perfetta su Opera, Firefox, Safari, IE6 e IE7.

Una piccola nota è necessaria per quanto riguarda la compatibilità dell'esempio su IE5 e IE5.5: questi due browser non implementano correttamente il padding sulle immagini, e la resa non è perfetta. È pur vero che questi due browser sono piuttosto datati e ormai poco diffusi, ma se la compatibilità dovesse essere cruciale, ecco l'alternativa, in cui alla combinazione bordi/padding è stato sostuito un bordo di 6 pixel.

Una galleria di miniature con effetto ombra
A questo punto è piuttosto semplice estendere il primo esempio per ottenere una galleria di miniature con effetto ombra. Per ciò che riguarda il markup, si tratta di una semplice lista che contiene le immagini:

In casi reali, le miniature potranno costitutire link verso gli ingrandimenti: basterà quindi racchiudere le immagini all'interno dei rispettivi link. Per quanto riguarda il CSS di questo esempio, la miniatura singola realizzata nell'esempio precedente ci fornisce buona parte della sua implementazione. In effetti, si tratta solo di eliminare il marcatore da lista e list-item e sistemare i margini tra le diverse miniature. Ecco il CSS per intero:


Miniature con ombra diagonale
Disponiamo ora di tutti gli elementi per poter predisporre una galleria di immagini con ombra diagonale. L'immagine di sfondo utilizzata nel terzo esempio è in questo caso larga 90px e alta 7, ecco il suo ingrandimento:

Figura 3 - Ombra diagonale

Rispetto all'esempio precedente è bastato cambiare il padding inferiore del contenitore dell'immagine e, ovviamente, l'immagine di sfondo. Lo stesso approccio si potrà utilizzare anche sulla miniatura singola del primo esempio.

Conclusioni
Abbiamo visto in questo articolo due modi per rendere gradevoli miniature e gallerie di immagini. La compatibilità degli esempi è buona: sono stati testati con successo su IE 6 e 7, oltre che sulle ultime versioni di Opera, Firefox e Safari. Alcune note in conclusione: se la compatibilità su IE5.x dovesse essere fondamentale, è possibile utilizzare un bordo spesso invece di bordi e padding.

Per una resa perfetta dei margini su IE6 e per ovviare al doubled-margin bug basterà dichiarare display: inline il contenitore dell'immagine, sia esso un div o un list-item <li>.

Le tecniche qui presentate non hanno la flessibilità delle drop-shadow, dato che dovremo preparare un'immagine di sfondo larga quanto la miniatura/immagine che accompagnano, ma la loro realizzazione non comporta molto lavoro e adattarle in larghezza risulta piuttosto semplice, soprattutto se si utilizza un programma di disegno vettoriale, come InkScape con il quale ho realizzato quelle di questo articolo.
Codice e immagini sono disponibili per il Download.