Effetto immagini in bianco e nero con i CSS cross browser

Grazie all’arrivo dei filtri CSS3 è possibile, seppur con enormi limiti legati ai browser, intervenire con “effetti speciali” direttamente sulle immagini. In questo brevissimo tutorial vediamo come possiamo trasformare un’immagine a colori in bianco e nero semplicemente utilizzando questi filtri. Segnaliamo che, grazie all’uso di filtri proprietari, il seguente effetto si può ottenere praticamente su tutti i browser. Resta escluso IE10 che ha abbandonato l’uso di filtri nativi ma, allo stesso tempo, non ha ancora implementato alcune delle peculiarità dei CSS3 (L’effetto si può ottenere su IE10 unicamente utilizzando dei filtri SVG). PS: Firefox è salvo!

Vediamo allora come attivare l’effetto “scala di grigi” affinchè funzioni su Firefox 10+, Firefox su Android, Internet Explorer 6-8, Chrome 19+, Safari +6 (sia su Pc che su iOS). La proprietà CSS da applicare,  ad un’ipotetica immagine con classe .grayscale sarà:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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 rimuovere l’effetto, per esempio al mouseover faremo:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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%);
}

Se a questo andiamo ad applicare le transizioni CSS3 otterremo un passaggio graduale dal colore al bianco e nero.

E’ possibile vedere un esempio di applicazione al seguente link: http://jsfiddle.net/KDtAX/487/