Aggiungere una didascalia a comparsa alle foto con i CSS3
Attenzione
Questo articolo è stato pubblicato più di un anno fa, potrebbero esserci stati sviluppi.
Ti preghiamo di tenerne conto.
Nel tutorial di oggi vediamo come impostare le immagini del nostro sito in modo che al passaggio del mouse compaia una didascalia nella parte inferiore della foto con effetto fade-in / fade-out.
Questa tecnica fa uso di alcune delle caratteristiche implementate nei CSS3, l’ultima versione. Purtroppo non tutti i browser sono ancora uniformati a questa specifica, sappiate che a seconda del browser potrebbe non funzionare. I browser più nuovi che supportano i CSS3 sono Firefox 4, Safari 5, Mobile Safari e Opera 10. Explorer purtroppo non li supporterà (a quanto pare neanche la prossima versione: IE9), ma cercheremo comunque di non dimenticarci degli utenti IE.
Una delle nuove caratteristiche implementate nella terza versione dei CSS che sta iniziando ad attirare la mia attenzione sono le transitions. Le CSS transitions permettono di “animare” alcuni elementi, senza scrivere una sola riga di JavaScript. Può capitare che il browser non supporti le transitions, il risultato sarà ugualmente raggiunto senza animazioni, ma istantaneamente passando da uno stato a quello successivo conservando l’usabilità.
Per avere un’idea di ciò che stiamo per realizzare vi segnalo la pagina demo.
Dichiaro subito che in questo tutorial useremo alcuni dei nuovi tag HTML5 come “figure” e “figcaption“. Se siamo pronti iniziamo.
1. I mark-up basilari
Iniziamo con il codice base:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Didascalie sulle immagini con i CSS3 | Demo | TheJoe.it</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
Questa parte è nota a tutti. Creiamo “head” e “body“, dichiariamo la lingua utilizzata e la codifica caratteri.
2. L’articolo
In questo punto aggiungeremo l’articolo che conterrà le immagini.
<article> <h1>Lorem ipsum</h1> <h2>Lorem ipsum dolor sit amet.</h2> <h3>di Nullam Convallis</h3> <h4>Prefazione</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet, augue vitae hendrerit rhoncus, eros tellus consectetur urna, vitae fermentum ipsum lacus sit amet diam. Mauris ac arcu in elit condimentum feugiat a ac massa. Nulla eget cursus nisl. Cras adipiscing porttitor libero ut imperdiet. Suspendisse ultrices augue ac orci vulputate vehicula. Nunc in metus eu velit adipiscing aliquet sit amet a lectus. Proin non ipsum velit, sed tincidunt odio. In varius consectetur magna, vel volutpat elit cursus condimentum. Quisque a odio non augue consequat consequat quis eu mauris. In hac habitasse platea dictumst. Curabitur aliquet, lacus tincidunt ultricies sagittis, eros leo ultrices sapien, eget posuere nisl nibh ac nisi. In molestie luctus dui, in ultrices risus lacinia vitae. Sed ut quam nec ipsum bibendum venenatis accumsan sed elit. Nulla facilisi. Maecenas mollis, sapien vel sodales euismod, tellus leo adipiscing nisi, eu sollicitudin tellus metus vitae erat. </p> <footer>Tratto da <a href="http://www.lipsum.com/">Lorem Ipsum generator</a>.</footer> </article>
Ho usato un paio di tag HTML5 in questa parte di codice: “article” per contenere l’articolo, e “footer” per il testo a fondo pagina. Questo aggiunge una struttura precisa al nostro articolo, e lo rende semanticamente più comprensibile, anche per la grafica.
3. Aggiungiamo le foto
Ora possiamo aggiungere le nostre immagini. Le inserirò fra il titolo e il testo.
<figure style="width: 500px; height: 375px; float: left; margin-right: 20px;">
<img src="img/cielo.jpg" alt="Il cielo" />
<figcaption>
<h3>Il cielo.</h3>
<p>Una vista verso l'alto da terra.</p>
</figcaption>
</figure>
Per le immagini abbiamo usato altri due elementi HTML5: “figure” e “figcaption“. Questo ci permette di associare un’immagine con didascalia racchiudendo gli elementi “img” e “figcaption” in un unico elemento padre: “figure“.
4. Un po’ di stile
Ora siamo pronti ad aggiungere un po di CSS.
/* Margini e colori */
body {
margin: 30px;
font-family: "Georgia", serif;
line-height: 1.8em;
color: #333;
}
/* Dimensioni dell'articolo */
article {
width: 800px;
padding: 50px;
margin: 0 auto;
display: block;
font-size: 1.2em;
}
article h2 {
line-height: 1.5em;
}
/* Stile per il footer */
footer {
font-style: italic;
font-size: .9em;
}
5. Lo stile per le immagini
Diamo lo stile all’elemento “figure“, che già contiene “figcaption” e “img“.
/* Stile per le immagini */
figure {
position: relative;
display: block;
border: 1px solid #333;
margin: 5px 0 10px 0;
}
6. Stile per le didascalie
Qui viene il bello. La didascalia dovrà essere sopra all’immagine per essere letta, ma in fondo alla stessa, e deve avere uno sfondo non opaco, ma traslucido così si può continuare a vedere l’immagine sottostante. Deve anche essere nascosta inizialmente, in modo che possa mostrarsi solo al passaggio del mouse sull’immagine. Ecco come fare:
/* Stile per didascalie, nascondendole di default */
figcaption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: .7em;
color: #fff;
background-color: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Vediamo il CSS più da vicino:
- Posizionare la didascalia
Posizioniamo in modo assoluto l’elementofigure. - Impostare width, font size e colour
Una larghezza del 100% assicura che lo sfondo della didascalia abbia la stessa larghezza dell’elemento padre. Diamo anche alla didascalia dimensione e colore del testo diversi. - Impostare lo sfondo traslucido e nascondere la didascalia
Usiamo il formato colorergba()per specificare uno sfondo nero con opacità al 70%. Poi impostiamo l’opacità generale della didascalia a zero, e nascondiamo la didascalia. - Impostare l’effetto transizione
Ecco il cuore di questo tutorial, l’effetto “transition”:transition: opacity .5s ease-in-outdice al browser di animare la proprietàopacitydi questo elemento in mezzo secondo.
Ora abbiamo impostato la “transition“, per per farla apparire dobbiamo aggiungere la pseudo classe “:hover” all’elemento “figure“.
/* Mostra la didascalia al passaggio del mouse */
figure:hover figcaption {
opacity: 1;
}
Finiamo il tutto dando un po’ di stile al contenuto della didascalia.
/* Aggiungere padding e margin alla didascalia */
figcaption * {
padding: 0 10px;
margin: 0;
}
figcaption *:first-child {
padding-top: 5px;
}
figcaption *:last-child {
padding-bottom: 5px;
}
/* Impostiamo i custom font degli headers e caption */
figcaption, h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
7. Supporto per Internet Explorer
Abbiamo quasi finito. Ad ogni modo come già menzionato, IE non supporta le “transitions”. E come se non bastasse, IE8 e precedenti non supportano neppure “opacity” o il formato colore “rgba()”.
Anche se non c’è molto da fare con le “transitions” (se non affidarci a JavaScript), possiamo comunque usare alcune istruzioni CSS specifiche per IE, che almeno faranno comparire le didascalie al passaggio del mouse.
figcaption {
filter: alpha(opacity=0);
}
figure:hover figcaption {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);
}
Non abbiamo ancora finito con IE. IE8 e precedenti non riconoscono gli elementi HTML5 come “article“, “figure” e “figcaption“. Questo potrebbe non essere un problema, non fosse che IE non permette di applicare stili ad elementi a lui sconosciuti.
Fortunatamente la soluzione è semplice. E’ sufficiente creare gli elementi richiesti usando un po’ di JavaScript, il metodo “document.createElement()“. Mettiamo questo codice fra i commenti condizionali in modo che solo IE8 e precedenti possano vederlo.
<!--
Aggiungere supporto agli elementi HTML5 IE <= 8
-->
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
Ora le didascalie funzionano anche in IE8 ed inferiori, non avranno gli effetti fade-in e fade-out, ma almeno potranno essere lette.
1 commento
vale · 13 Gennaio 2011 alle 11:10 AM
carina la foto! 🙂