Filtro CSS 3 per rendere un’immagine da Bianco e Nero a Colori!

di Francesco PC Academy - 15 Aprile 2013 in Altro, Web Design

Con questo filtro CSS 3 otterremo un effetto speciale sulle immagini inserite nel nostro sito che prima era possibile realizzare solo attraverso Flash, jQuery o Javascript.

Dobbiamo ammettere che questo effetto pone dei limiti in quanto a compatibilità di Browser, non tutti infatti riescono a leggerlo.

Vediamo come applicare l’effetto “Scala di grigi”, compatibile con i seguenti browser:

Firefox 10+, Internet Explorer 6-8, Chrome 19 +, Safari 6+. 

Questo il codice da applicare alla nostra classe scala di grigio:

img.grayscale {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’//www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Se vogliamo invece che l’effetto venga rimosso quando il mouse passi sopra l’immagine:

mg.grayscale:hover {

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'//www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

    -webkit-filter: grayscale(0%);

}

Promozioni

Potrebbe interessarti

Fotografie di Persone, quali pubblicare

19 Aprile 2018

Esempi di siti ecommerce realizzati con woocommerce + wordpress

16 Marzo 2018

Non basta il Visual Composer per essere Web Designer

10 Maggio 2017

Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.