Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Effetti ombra alternativi sulle immagini con i CSS

Usare i CSS ed elementi grafici per aggiungere ombreggiature alle immagini
Usare i CSS ed elementi grafici per aggiungere ombreggiature alle immagini
Link copiato negli appunti

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:

Figura 1 - Screenshot dei due esempi
screenshot

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":

<div class="pic">
    <img src="sea_small.jpg" alt="Mar Nero" title="Mar Nero">
</div>

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
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:

    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
    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.

Ti consigliamo anche