Per manipolare le immagini ed apportare effetti simili ai filtri dei più comuni programmi di grafica, possiamo ricorrere al solo ausilio 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, è prevista 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;
}
L'applicazione della sfumatura ed opacità sulle immagini la si può vedere in azione nel file di esempio.
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.