Spesso si ha la necessita di accompagnare un'immagine da un testo descrittivo e ci si trova davanti al dilemma della scelta implementativa. Di recente si sta diffondendo la tendenza a usare didascalie semitrasparenti che si sovrappongono alla parte inferiore dell'immagine. Ecco una piccola anteprima di uno degli esempi realizzati.
Ottenere un'effetto simile è piuttosto facile grazie ai CSS e alle PNG semitrasparenti. Vedremo in questo articolo due esempi per immagine singola e uno per le gallerie di immagini. Cominciamo.
Didascalie semitrasparenti su immagini singole
Il nostro primo esempio rappresenta un link con una singola immagine e didascalia semitrasparente. Anzitutto, vediamo il codice HTML:
<div class="captionbox">
<a href="#">
<img src="image.png" style="width: 450px;height: 337px" alt="immagine">
<span>Descrizione immagine</span>
</a>
</div>
In sostanza, all'interno del div con classe "captionbox" viene inserito il link, che contiene l'immagine e uno span con la descrizione. Prima di procedere con il CSS, ecco l'unica immagine che viene usata come sfondo per la didascalia.
È un'immagine PNG semitrasparente alta 250px e larga 20, dal peso veramente ridotto (solo 291 bytes!). È costituita da cinque bande orizzontali alte 50 pixel ciascuna con due toni di grigio, due di azzurro e uno di bianco. L'utilizzo di un'immagine simile, presa in prestito da Yahoo!, consente di ottenere didascalie semitrasparenti di 5 diversi colori, oltre che un bell'effetto
rollover solo intervenendo sulla posizione dello sfondo.
Procediamo ora con il CSS. Per prima cosa il div esterno verrà reso float per far sì che assuma una larghezza adatta al suo contenuto; verranno regolati i margini e assegnato un bordo fine.
Il link verrà reso float anch'esso e posizionato relativamente per permettere i posizionamenti assoluti al suo interno,
mentre l'immagine sarà resa block-level.
Lo span, ovvero la parte più importante dell'esempio, verrà posizionato assolutamente all'interno del link al fondo dello stesso e avrà una larghezza pari al 100%. Verrà poi assegnata l'immagine di sfondo da ripetere orizzontalmente, mostrando la porzione tonale che ci interessa. In fase :hover del link tale porzione potrà essere cambiata così
da consentire un rollover grafico solo intervenendo sul background-position.
Queste le parti essenziali del CSS dell'esempio, che ora possiamo vedere per intero:
div.captionbox{float: left;margin: 10px;border: 1px solid #999}
div.captionbox img{border:0;display:block}
div.captionbox a{position: relative;float: left;color: #FFF;
text-decoration: none}
div.captionbox span{position:absolute;bottom: 0;width: 100%;padding: 3px 0;
background: url(opacity.png) repeat-x 0 -100px;
cursor: pointer;text-align: center}
div.captionbox a:hover span{background-position: 0 -200px}
Tutto qui. Cinque semplici regole che consentono un effetto molto accattivante e funzionale.
Ovviamente la tecnica si può applicare anche su immagini che non siano contenute in link: ecco l'esempio alternativo ottenuto con poche semplici modifiche al CSS visto sopra. In questo caso ovviamente è stato eliminato il rollover e le regole da cinque sono diventate solo tre.
Galleria di immagini con didascalie semitrasparenti
Il concetto dell'esempio precedente si può estendere per ottenere una galleria di immagini con didascalie semitrasparenti con pochissime modifiche. Cominciamo con l'HTML: in questo caso ovviamente si è usata una lista, con classe "captionbox", in cui i singoli list-item contengono i link con immagine e descrizione:
<ul class="captionbox">
<li>
<a href="#">
<img src="immagine1.png" alt="immagine" style="width: 256px;height: 192px">
<span>Descrizione immagine 1</span>
</a>
</li>
<li>
<a href="#">
<img src="immagine2.png" alt="immagine" style="width: 256px;height: 192px">
<span>Descrizione immagine 2</span>
</a>
</li>
</ul>
Rispetto al primo esempio, le modifiche al CSS sono davvero minime: basta infatti regolare margini e padding di lista e list-item (oltre che a contenere i float per la lista)
e usare i selettori opportunamente. Per il resto, il blocco dichiarativo di ciascuna regola è rimasto praticamente immutato. Vediamo il CSS per intero:
ul.captionbox{float:left;width:100%} /*serve per contenere i float*/
ul.captionbox, ul.captionbox li{margin:0;padding:0;list-style: none}
ul.captionbox li{float: left;margin: 0 15px 15px 0;border: 1px solid #999}
ul.captionbox img{border: 0;display: block}
ul.captionbox a{position:relative;display: block;color: #FFF;
text-decoration: none}
ul.captionbox span{position: absolute;bottom: 0;width: 100%;padding: 3px 0;
background: url(opacity.png) repeat-x 0 -150px;
cursor: pointer;text-align: center}
ul.captionbox a:hover span{background-position: 0 -100px}
Da notare come nell'esempio, qualora fosse necessario, le discalie si dispongono su più righe senza necessità di accorgimenti particolari.
La tecnica,grazie al CSS e la costruzione grafica dell'immagine di sfondo, consente infatti didascalie alte fino a 50px e che quindi possono contenere anche due o tre righe di testo.
Conclusioni
In questo articolo abbiamo visto tre semplici esempi per ottenere didascalie semitrasparenti sulle immagini. La compatibilità degli esempi è piuttosto buona: sono stati testati con successo su IE7, IE8 e le ultime versioni di Opera, Firefox, Safari e Chrome.
Due parole per quanto riguarda IE6: questo browser non supporta nativamente le PNG trasparenti, e quindi la tecnica non consente l'effetto atteso. Sebbene ci siano diverse soluzioni per abilitare la semitrasparenza delle PNG, queste risultano problematiche quando gli sfondi vengono posizionati o ripetuti. Ho optato quindi per una soluzione che potesse degradare bene: la PNG utilizzata negli esempi consentirà uno sfondo azzurro intermedio totalmente coprente su IE6, utilizzando Tweak PNG di cui
abbiamo parlato in questa pagina dell'articolo Usare il formato PNG su Internet Explorer. In questo modo tra l'altro non vengono usati hack, commenti condizionali nè javascript, e le didascalie saranno fruibili anche agli utenti con IE6.
Codice, immagini ed esempi sono disponibili per il download. Alla prossima.
