devdev / in the loop

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

Questo articolo ti è stato utile?
CSS – LETTURA 4 MINUTI Come rendere responsive i tag <pre> nel CSS
Il contenuto racchiuso nei tag <pre> potrebbe non essere automaticamente responsive e quindi in alcuni casi potrebbe “sfondare”. Vediamo come…
CSS – LETTURA 6 MINUTI Le unità CSS viewport
Da qualche anno sono disponibili le nuove unità di misura viewport in CSS. Sono utilissime perché ci permettono di creare…
CSS – LETTURA 5 MINUTI Individuare elementi vuoti con il selettore CSS :empty
Spesso, vorremmo poter individuare (e dargli uno stile, magari) gli elementi in base al loro contenuto e non in base…
CSS – LETTURA 5 MINUTI Immagini responsive in CSS con background-image
Nella quasi totalità dei casi, quando parliamo di immagini responsive, ci riferiamo alle immagini inline in HTML. Questo perché prima…
Roba figa da
if (weekend) {
    relax();
}
la nostra newsletter, ogni tanto.