Applicare effetti di sfumatura ed opacità sulle immagini con i CSS3

Spesso l'attenzione di un visitatore, che naviga un sito web, è attirata dalle immagini. Se sono di grande impatto ed esplicative, si tralascia anche la lettura del testo per ammirare la fotografia. Se a questi elementi grafici aggiungiamo anche qualche effetto di sfumatura ed opacità, il gioco è fatto.

L'articolo adierno affronta il tema, come si evince dal titolo, dell'applicazione di effetti di sfumatura ed opacità sulle immagini, servendosi soltanto di codice CSS3.

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 una 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 content

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;  
}

Se volessimo rendere contenitore ed immagine anche Responsive, è sufficente pochissimo codice affinchè il div#content si estenda per tutta la larghezza del media, fino ad una dimensione di 767 pixel. Infatti abbiamo:

@media only screen and (max-width: 767px) 
{
#content
{
width:  100%; 
}
	
#content .caption{font-size:1.2em;}
}

Fatto. Possiamo apprezzare quanto fino ad ora realizzato, visualizzando il file demo di esempio.

Conclusioni

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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati