Effetti ombra alternativi sulle immagini con i CSS

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:

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:

div.pic{float:left;margin: 20px;padding:0 0 12px 0;
    background: url(shadow.png) no-repeat bottom center}

div.pic img{display: block;border: 1px solid;
    border-color: #CCC #CCC #AAA #CCC;
    padding: 5px;background: #f6f6f6}

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:

<ul id="minipics">
  <li><img src="egg_small.jpg" alt="uovo" title="Uovo"></li>
  <li><img src="field_small.jpg" alt="Campo" title="Campo"></li>
</ul>

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:

ul#minipics{margin:0;padding:0;list-style-type:none}

ul#minipics li{float: left;margin: 20px;padding:0 0 12px 0;
    background: url(shadow.png) no-repeat bottom center}

ul#minipics li img{display:block;border:1px solid;
    border-color: #CCC #CCC #AAA #CCC;
    padding: 5px;background: #f6f6f6}

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
di cui abbiamo parlato in questo
articolo 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. Alla prossima.