Filtro CSS 3 per rendere un’immagine da Bianco e Nero a Colori!
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%
);
}
Commenti