CSS  »  Articoli  »  Effetti con CSS 

Effetto ombra sulle immagini

Un effetto senza dubbio efficace che si può applicare sulle immagini è aggiungere una leggera ombra (in inglese drop shadow). In rete si trovano molte soluzioni per ottenerla, eccone alcune:

• CSS Drop Shadows su Alistapart
• CSS Drop Shadows II su Alistapart
• Easy CSS Drop Shadows

Alcune4 usano elementi aggiuntivi nel markup, altre fanno distinzioni di tecnica nel caso si tratti di un paragrafo, altre invece usano i margini negativi e regole CSS aggiuntive per sistemare le cose su Internet Explorer. Questo browser infatti non supporta molto bene i margini negativi sulle immagini: se "escono" dal loro container, a meno di lavorarci un po' su, queste vengono semplicemente tagliate. La soluzione che ho elaborato, invece di usare margini negativi, usa il posizionamento relativo e non richiede nè markup nè proprietà CSS aggiuntive. La prima cosa da fare è disporre di un'immagine che darà l'effetto ombra. In questo caso ne ho preparata una di 400x400 pixel:

Da notare, quindi, che l'immagine (o il paragrafo, o il div come vedremo in seguito) non dovrà superare i 400 pixel in larghezza nè in lunghezza. In caso contrario, andrà preparata un'immagine un po' più grande. Vediamo l'HTML dell'esempio:

<div class="imgcontainer"><img src="faro.jpg" alt="faro"></div>

Ora veniamo al CSS. Al div, che è reso float, viene assegnata l'immagine di sfondo e del padding sui lati destro e inferiore pari alla larghezza della sfumatura. l'immagine viene poi traslata verso l'alto e verso sinistra attraverso un posizionamento relativo. Per la buona riuscita è importante che la somma di padding e traslazione di posizionamento cambiata di segno siano proprio uguali alla distanza che separa l'ultimo pixel della sfumatura dal bordo più vicino della sua immagine. Infine vengono anche assegnati del padding e un bordo fine per dare un effetto cornice. Ecco il codice:

div.imgcontainer{ float: left;padding:0 6px 6px 0;
    background: url(dropshadow.jpg) no-repeat bottom right}

div.imgcontainer img{ display:block;
    position: relative;top: -5px;left: -5px;
    border:1px solid #ccc;border-color: #ccc #666 #666 #ccc;
    padding:5px}

E il gioco è fatto.

Miniature con dropshadow

Le stesse regole dell'esempio appena visto, ma con diversi selettori, possono essere applicate alle miniature, usando la stessa immagine per l'ombra. Ho applicato l'effetto alle miniature usate per la galleria di immagini Galleria di immagini con ingrandimento nella stessa pagina. Ecco il risultato, l'effetto è decisamente accattivante. Vediamo l'HTML, costituito da una semplice lista non ordinata di immagini:

<ul id="minipics">
    <li><img src="egg_small.jpg" alt="uovo"></li>
    <li><img src="field_small.jpg" alt="Campo di grano in una notte d' estate"></li>
    <li><img src="orange_small.jpg" alt="Arancia digitale"></li>
    <!-- eccetera -->
</ul>

Le miniature verranno rese float per ottenere una galleria fluida, e verrà reso un effetto ombra. Ecco il CSS:

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

ul#minipics li{float: left;margin: 20px;padding: 0 6px 6px 0;
    background: url(dropshadow.jpg) no-repeat bottom right}

ul#minipics li img{display: block;
    position: relative;top: -5px;left: -5px;
    border: 1px solid #ccc;border-color: #ccc #666 #666 #ccc;
    padding: 5px}

Altri articoli

Altre guide

Altre newsletter