Un effetto che è piuttosto frequente vedere sui siti e blog di nuova generazione, sono le cosiddette scritte in overlay sopra alle immagini, molto spesso accompagnate da un background scuro semitrasparente. Ecco un esempio:
In questo articolo vedremo come realizzare delle scritte sovrapposte alle nostre immagini utilizzando i fogli di stile CSS.
La prima cosa da fare è creare una struttura HTML come questa:
<div class="boximg">
<img border="0" src="tramonto.jpg"/>
<div class="boxtesto">
<span class="testo">Un bellissimo tramonto!</span>
</div>
</div>Come potete vedere ho creato un DIV contenitore (con classe ".boximg") al cui interno posiziono la mia immagine ed un nuovo div (con classe ".boxtesto") che a sua volta contiene uno span che marca il testo che si vuole applicare.
Passiamo adesso a vedere il CSS che, materialmente, svolgerà il lavoro:
.boximg {
position: relative;
width: 400px; /* Stessa larghezza dell'immagine */
height: 300px; /* Stessa altezza dell'immagine */
}
div.boxtesto {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
}
span.testo {
padding: 10px;
color: #FFFFFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}Il box contenitore (".boximg") ha un posizionamento relativo e dimensioni uguali a quella dell’immagine che è destinato ad ospitare. Il box contenitore del testo (".boxtesto") è il fulcro del nostro lavoro: ha un posizionamento assoluto, che lo sottrae al normale flusso degli elementi, ed è posizionato al margine inferiore sinistro del suo contenitore; ovviamente ha larghezza 100% al fine di occupare l’intero spazio disponibile in orizzontale. Interessanti, infine, le due definizioni del background mediante rgb e rgba che servono a definire lo sfondo scuro e semi-trasparente. Lo span ".testo", per finire, ha il solo scopo di stilizzare la scritta e di applicarvi un po’ di padding.
Vecchie versioni di Explorer e la trasparenza
Il codice visto in precedenza è quasi perfetto… unico neo? la trasparenza non funziona con Internet Explorer che, in nessuna delle versioni sin’ora rilasciate, supporta rgb e rgba! Al fine di correggere questo difetto e rendere il nostro CSS cross-browser, dovremo far ricorso ai cari e vecchi filtri di IE:
/* Per IE 5.5, 6 e 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Per IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";Ecco, finalmente, il nostro CSS completo:
.boximg {
position: relative;
width: 400px; /* Stessa larghezza dell'immagine */
height: 300px; /* Stessa altezza dell'immagine */
}
div.boxtesto {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
/* Per IE 5.5, 6 e 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Per IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
span.testo {
padding: 10px;
color: #FFFFFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}