Modificare le fotografie ed applicare effetti particolari con un software (come Photoshop o Gimp) è una cosa all’ordine del giorno per un web designer.
Ci sono dei metodi alternativi che ci permettono di accelerare i tempi e non dover creare una nuova versione di un’immagine.
Parliamo dei filtri realizzati con i CSS3
In questo tutorial modificheremo un’immagine, applicando un effetto seppia, per simulare una vecchia foto.
Ho utilizzato questa fotografia, liberamente scaricabile
Scriviamo l’HTML
Il codice HTML è semplicissimo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effetto Seppia con i CSS3</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="img"> <img src="img/pen-paper-coffee.jpg" alt="pen-paper-coffee" class="seppia" width="1000" height="662"> </div> </body> </html>
Ho inserito soltanto l’immagine scelta, assegnando una classe che inserirò nei CSS:
img.seppia {
filter: sepia(100%);
-webkit-filter: sepia(100%); -moz-filter: sepia(100%);
-ms-filter: sepia(100%); -o-filter: sepia(100%); -webkit-filter(1);
}
#img {
margin: 0 auto;
width: 1000px;
}
Se proviamo a visualizzare l’immagine, dopo aver salvato il foglio di stile e ricaricando la pagina, questo sarà il risultato ottenuto:
See the Pen CSS3: effetto seppia by Eugenio (@rupertone) on CodePen.0
Bello, vero?
Fa molto Instagram, in fondo 🙂
N.B.: Come al solito, Internet Explorer nelle sue vecchie versioni (la 8 e la 9) non supporta questo filtro, bisogna utilizzare metodi alternativi.
