Immagini opache e sfumate con CSS3
Immagini opache e sfumate con CSS3/figcaption>
Extrowebsite

Se si ha la necessità di "manipolare" le immagini, e voler apportare qualche effetto simile ai filtri dei più comuni programmi di grafica, è possibile avvalersi solo dei CSS3. L'articolo odierno affronta il tema, come si evince dal titolo, dell'applicazione di effetti di sfumatura ed opacità sulle immagini, con i fogli di stile.

Nel modulo dei CSS3, dedicato alle immagini, abbiamo la possibilità di impostare più immagini di sfondo e non solo. Alle immagini, possiamo dare determinati tipi di effetti, quali gradienti, sfumature ecc.

Il codice HTML

Il codice HTML dell'esempio è molto semplice. Un div contenitore al quale viene assegnata un'immagine di background ed una didascalia quale descrizione della stessa immagine:

<div id="content">
	<div class="caption">
		Lorem ipsum dolor sit amet
	</div> 
</div>

Il codice CSS del div contenitore

Tutto il "lavoro" viene svolto dai CSS3. Infatti partendo dalla parte più semplice, abbiamo:

#content{
background: url(immagine.jpg); 
width:      50%;
height:     50%; 
color:      #fff;
position:   relative;
background-size:         100% 100%; 
-moz-background-size:	 100% 100%;
-webkit-background-size: 100% 100%;
margin:     10px auto 0;

La proprietà background-size serve per impostare le dimensioni delle immagini usate come sfondo, in un elemento. Per assicurare una compatibilità cross-browser, sarebbe bene introdurre proprietà quali -moz-background-size e -webkit-background-size rispettivamente per Mozilla Firefox e Safari, in versioni meno recenti.

La seconda parte di codice, propedeutica alle sfumature, è di seguito riportata:

background-image:  -webkit-linear-gradient(top left, rgba(178,34,34,  0.1),  rgba(75, 107, 175, 1)), url(way.jpg); 
background-image:  -moz-linear-gradient(top left, rgba(178,34,34,  0.1),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:  -ms-linear-gradient(top left, rgba(178,34,34,  0.1),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:  -o-linear-gradient(top left, rgba(178,34,34,  0.1),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:  linear-gradient(top left, rgba(178,34,34,  0.1),  rgba(75, 107, 175, 1)), url(way.jpg); 	

Anche per i gradienti, ci si deve avvalere di tag "proprietari" in quanto la dichiarazione del W3C linear-gradient non è supportata da tutti i browser. Cosa viene dichiarato con questo gruppo di codice?

Viene applicato un gradiente lineare (linear-gradient) a partire dalla posizione top left. Il colore viene espresso in RGBA in modo tale da poter gestire anche l'opacità. Nello stato normale essa è pari a 0.1, per il primo colore. Invece per il secondo colore è pari ad 1. Nell'esempio sono stati applicati 2 gradienti ma ne possiamo introdurre anche di più.

Nello stato :hover, invece, avremo una sfumatura ed opacità più oscure, sempre per il primo colore. Il codice è il seguente:

#content:hover
{
background-image:  -webkit-linear-gradient(top left, rgba(178,34,34, 0.5),  rgba(75, 107, 175, 1)), url(way.jpg); 
background-image:     -moz-linear-gradient(top left, rgba(178,34,34, 0.5),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:      -ms-linear-gradient(top left, rgba(178,34,34, 0.5),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:       -o-linear-gradient(top left, rgba(178,34,34, 0.5),  rgba(75, 107, 175, 1)), url(way.jpg);
background-image:          linear-gradient(top left, rgba(178,34,34, 0.5),  rgba(75, 107, 175, 1)), url(way.jpg); 	
background-size:		 100% 100%; 
-moz-background-size:	 100% 100%;
-webkit-background-size: 100% 100%;
cursor:pointer; 
}

Come scritto poco più su, si noti il grado di opacità, pari a 0.5. Queste dichiarazioni CSS sono la parte più "corposa" di tutto il codice. Per quanto riguarda la didascalia, molto semplice le dichiarazioni da scrivere:

.caption{
position: absolute;
bottom:0; 
left:0; 
padding: 15px; 
font-size:1.5em; 
line-height: 1.5em; 
font-weight:bold;  
}

riporta l'effetto descritto.

Con poco sforzo ed un pizzico di creatività, possiamo abbellire e mettere in risalto molte parti delle pagine web. L'esempio più evidente sono le immagini ma, con uno studio mirato, si possono applicare tali effetti anche ad altri elementi della pagina.