Convertire le immagini in bianco e nero in CSS

Togliere la saturazione ad un’immagine è operazione molto semplice con il giusto filtro CSS. Per applicarlo applichiamo all’immagine una regola come questa:

Applichiamola in questo modo a qualsiasi immagine

Da quali browser è supportata questo effetto? Secondo i dati di caniuse.com, Chrome, Firefox, Safari, Opera, iOS e Android sia desktop che mobile supportano a pieno il filtro, mentre Internet Explorer e Microsoft Edge possono avere qualche problema. Vediamo come aggirare il problema usando un filtro SVG.

Creiamo un file chiamato biancoenero.svg , incolliamo questo testo nel file. Stiamo creando un file grafico SVG contenente un layer traslucido che applicheremo via CSS sulle immagini.

Modifichiamo quindi la classe .biancoenero  creata in precedenza in questo modo

Fatto. La nostra classe è perfettamente cross-browser e vi permetterà di rendere visivamente qualsiasi immagine in bianco e nero. Potrete anche modificare la percentuale di desaturazione intervenendo sulla percentuale, usando ad esempio 50%  anziché 100% .