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:

img.biancoenero {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: gray; /* Fix per Explorer */
}

Applichiamola in questo modo a qualsiasi immagine

<img src="applepark.jpg" alt="Apple Park" class="biancoenero" />

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.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="greyscale">
        <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>

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

img.biancoenero {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: gray; /* Fix per Explorer */
    filter:url(biancoenero.svg); 
}

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% .