Filtri grafici con i CSS

24 novembre 2014

Abbiamo visto in un altro articolo (Blend Modes, CSS… come Photoshop) come sia stata da poco implementata nei CSS una delle fondamentali funzionalità dei programmi di grafica, ovvero la possibilità di definire e gestire le modalità di fusione di elementi e sfondi. Sulla stessa linea si colloca un altro modulo che, per l’esteso supporto sui browser più recenti, fornisce già ora al web designer un nuovo interessante tool per la manipolazione grafica degli elementi. Il modulo in questione, Filter Effects Module Level 1, offre l’opportunità di applicare a immagini ed altri elementi una serie di filtri che emulano, anche in questo caso, le potenzialità fornite dai programmi di grafica.

Supporto sui browser

Prima di analizzare la specifica e le proprietà, verifichiamo quello che è al momento il supporto cross-browser. Ci affidiamo a Can I Use, da cui ricaviamo questo screenshot della tabella di supporto per la proprietà filter:

Figura 1 – Supporto sui browser della proprietà filter

Le ultime versioni di Chrome, Safari e Opera supportano la proprietà con il prefisso -webkit. Firefox estenderà il supporto completo a partire dalla versione 35 in fase di sviluppo e già disponibile attraverso il canale Aurora. Per Internet Explorer c’è da attendere il rilascio di versioni successive alla 11.

La proprietà CSS filter

L’applicazione di filtri via CSS con la proprietà filter è delle più semplici. Si tratta di definire la proprietà (oggi ancora nella forma -webkit-filter per i browser che la supportano) per poi impostare uno o più tipi di effetto con un valore. Nella demo abbiamo riunito in un unica pagina l’intero set di effetti che è possibile applicare.

Vediamo una per una le opzioni che ci mette a disposizione la specifica.

blur

Consente di ottenere un’immagine sfocata in base al fattore di sfocatura assegnato (raggio). Questo valore va espresso con un’unità di misura, tipicamente in px. Più è alto il valore, più elevata sarà la sfocatura.

#img-2 {filter: blur(10px); -webkit-filter: blur(10px);}

Figura 2 – Effetto blur

brightness

Controlla la luminosità dell’immagine. Il valore va espresso in percentuale. 100% restituisce l’immagine originale. Valori inferiori scuriscono l’elemento fino al nero (0%). Valori superiori accrescono la luminosità.

#img-3 {filter: brightness(200%); -webkit-filter: brightness(200%);}

Figura 3 – Effetto brightness

contrast

Agisce sul contrasto dell’immagine. Il valore si esprime in percentuale. 100% lascia l’elemento immutato.

#img-4 {filter: contrast(200%); -webkit-filter: contrast(200%);}

Figura 4 – Effetto contrast

drop-shadow

Aggiunge un’ombreggiatura dietro all’elemento. L’impostazione è identica a quella della proprietà box-shadow già prevista in altri precedenti moduli dei CSS.

#img-5 {filter: drop-shadow(10px 10px 20px black); -webkit-filter: drop-shadow(10px 10px 20px black);}

Figura 5 – Effetto drop-shadow

grayscale

Converte l’immagine in scala di grigi. Il valore va espresso in percentuale, da 0% (elemento immutato) fino al 100% (elemento in scala di grigi). Valori intermedi desaturano via via i colori fino alla completa riduzione ai toni grigi.

#img-6 {filter: grayscale(100%); -webkit-filter: grayscale(100%);}

Figura 6 – Effetto grayscale

hue-rotate

Applica una rotazione su un’immaginaria ruota della tinta cromatica. Il valore va espresso con un angolo (da 0deg a 360deg).

#img-7 {filter: hue-rotate(45deg); -webkit-filter: hue-rotate(45deg);}

Figura 7 – Effetto hue-rotate

invert

Inverte i colori dell’immagine. Il valore va espresso in percentuale, da 0% (immagine immutata) fino a 100%.

#img-8 {filter: invert(100%); -webkit-filter: invert(100%);}

Figura 8 – Effetto invert

opacity

Rende semi-trasperente l’immagine. I valori vanno da 0% (immagine totalmente trasparente) fino a 100% (immagine invariata rispetto all’originale).

#img-9 {filter: opacity(10%); -webkit-filter: opacity(10%);}

Figura 9 – Effetto opacity

saturate

Agisce sulla saturazione dell’immagine. I valori sono anche in questo caso in percentuale. Partendo dal 100% (immagine invariata), possiamo desaturare (scendendo verso lo 0%) o saturare i colori (oltre il 100%).

#img-10 {filter: saturate(200%); -webkit-filter: saturate(200%);}

Figura 10 – Effetto saturate

sepia

Applica l’effetto sepia. I valori sono in percentuale con un massimo pari al 100% (effetto sepia completo).

#img-11 {filter: sepia(100%); -webkit-filter: sepia(100%);}

Figura 11 – Effetto sepia

Nella seconda parte dell’articolo vediamo come applicare più effetti contemporaneamente.

Se vuoi aggiornamenti su Filtri grafici con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Filtri grafici con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy