filter

La proprietà CSS filter permette di applicare vari effetti grafici come una sfocatura o una variazione dei colori ad un elemento, un po’ come i filtri di Photoshop.

I filtri sono comunemente utilizzati per variare il rendering di un’immagine, prima che essa venga visualizzata.

Sintassi

.filtro {
  filter: <nome filtro> | none;
}

Al posto di <nome filtro> va inserito il nome di un filtro valido, ecco l’elenco:

• blur
• brightness
• contrast
• drop-shadow
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia
• url

Ecco un esempio dell’utilizzo di un singolo filtro:

.sfocato {
  filter: blur(30px);
}

Si possono combinare più filtri inserendo uno spazio tra loro, ecco un esempio:

.tanti-filtri {
  filter: grayscale(30%) blur(30px);
}

Funzioni

Per utilizzare la proprietà filter, bisogna specificare un valore di una delle funzioni elencate sopra. Se il valore non è corretto, la funzione restituirà none.

Quando non è specificato, la funzione accetta un valore espresso con un segno percentuale (es: 38%) o un valore espresso come un decimale (es: 0.38).

Esempi

Di seguito sono riportati degli esempi dell’utilizzo dei vari filtri su questa immagine:

greyscale

filter: grayscale( 0% | 100%);

Il filtro greyscale si traduce in scala di grigi, e come suggerisce il nome, mostra l’immagine a cui è applicato in bianco e nero.

Il valore accettato dalla funzione definisce la proporzione della conversione. Un valore del 100% significa che l’immagine è completamente in scala di grigi. Un valore dello 0% lascia l’immagine inalterata. Parametri tra 0% e 100% sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. I valori negativi non sono consentiti.

sepia

filter: sepia( 0% | 100% );

Applica l’effetto seppia all’elemento a cui è applicato il filtro.

Il valore accettato dalla funzione definisce la proporzione della conversione. Un valore del 100% significa che l’immagine è completamente seppia. Un valore dello 0% lascia l’immagine inalterata. Parametri tra 0% e 100% sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. I valori negativi non sono consentiti.

saturate

filter: saturate( 0% | 100% );

Aumenta la saturazione dell’elemento a cui è applicato il filtro.

Il valore accettato dalla funzione definisce la proporzione della conversione. Un valore dello 0% significa che l’immagine è completamente senza saturazione. Un valore del 100% lascia l’immagine inalterata. Gli altri parametri sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. I valori negativi non sono consentiti.

hue-rotate

filter: hue-rotate( 0deg | 360deg  );

Applica la rotazione della tonalità all’elemento a cui è applicato l’effetto.

L’immagine a cui viene applicato il filtro, viene alterata in base al numero di gradi del cerchio cromatico definito dal valore, in gradi indicati con deg, passato alla funzione.

Un valore di 0deg lascia l’immagine inalterata. Se l’angolo del parametro non è inserito, un valore di 0deg viene applicato. Il valore massimo è 360deg.

invert

filter: invert( 0% | 100%);

Inverte i campioni all’elemento a cui viene applicato l’effetto.

Il valore accettato dalla funzione definisce la proporzione della conversione. Un valore del 100% significa che l’immagine è completamente invertita. Un valore dello 0% lascia l’immagine inalterata. Parametri tra 0% e 100% sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. I valori negativi non sono consentiti.

opacity

filter: opacity( 0% | 100% );

Applica trasparenza ai campioni dell’elemento a cui è applicato il filtro.

Il valore accettato dalla funzione definisce la proporzione della conversione. Con un valore dello 0% significa che l’elemento è completamente trasparente. Con un valore del 100% lascia l’immagine inalterata. Parametri tra 0% e 100% sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. Questa funzione è molto simile alla proprietà opacity. La differenza è che con i filtri, alcuni browser forniscono l’accelerazione hardware per prestazioni migliori. I valori negativi non sono consentiti.

brightness

filter: brightness( 0% | 100% );

Applica un moltiplicare lineare all’immagine a cui è applicato il filtro per farla apparire più o meno luminosa.

Un valore dello 0% rende l’immagine completamente nera. Un valore dello 0% lascia l’immagine inalterata. Parametri tra 0% e 100% sono moltiplicatori lineari dell’effetto. Se il parametro non è inserito, verrà utilizzato 100%. I valori negativi non sono consentiti.

contrast

filter: contrast( 0% | 200% );

Modifica il contrasto dell’immagine a cui è applicato l’effetto.

Un valore dello 0% rende l’immagine completamente nera. Un valore del 100% lascia l’immagine inalterata. Valori superiori al 100% sono consentiti, rendono l’immagine con meno contrasto. Se nessun valore è fornito, viene utilizzato 100%.

blur

filter: blur( px | ecc... );

Applica l’effetto sfocatura gaussiana (gaussian blur) all’immagine a cui viene applicato l’effetto.

Il valore del “raggio” definisce il valore della deviazione standard della funzione gaussiana, oppure quanti pixel dello schermo miscelare tra essi. Se nessun parametro è fornito, verrà utilizzato 0. Il parametro è specificato come lunghezza CSS, non sono accettati valori percentuali.

drop-shadow

filter: drop-shadow(18px 18px 20px yellow);

Applica un’ombra esterna (drop shadow) all’elemento a cui è applicato il filtro.

Un’ombra esterna è una versione sfocata e deviata della maschera alpha dell’immagine disegnata in un colore particolare, composita sotto l’immagine.

La funzione accetta i parametri di tipo (definiti nei Backgrounds CSS3), con l’eccezione della keyword “inset”, che non è consentita.

Questa funzione alla proprietà box-shadow. La differenza è che con i filtri, alcuni browser abilitano l’accelerazione hardware, che consente prestazioni migliori.

Le drop-shadow seguono il contorno esterno di un oggetto, a differenza delle box-shadow che trattano qualsiasi oggetto come una scatola.

Come nelle text-shadow, non c’è il parametro spred per creare ombre solide più larghe dell’oggetto.

url

La funzione url() accetta come parametro il percorso di un file XML che specifica un filtro SVG, può anche includere un collegamento ad un altro elemento filtro specifico.

Animare i filtri

I filtri possono essere animabili, questo aspetto è molto interessante e consente di creare moltissime cose, ecco un piccolo esempio:

Note

Come abbiamo visto, è possibile combinare più funzioni per manipolare il risultato finale, ma nel fare ciò l’ordine conta! Se per esempio utilizziamo grayscale() e sepia(), otteniamo un’immagine completamente grigia!

Le specifiche nominano la funzione filter(<url-img>, <funzione filtro>), che consentirebbe di applicare filtri ad ogni immagine utilizzata direttamente nel CSS. Per esempio, puoi sfocare un’immagine di background senza sfocare il testo. Questa funzione però non è ancora supportata dai browser, nel frattempo puoi applicare lo sfondo e il filtro ad un pseudo-elemento per ottenere un effetto simile.

I filtri in Internet Explorer

La proprietà filter può essere utilizzata anche in questo modo:

.opacita {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=30);
}

Questa tecnica è utilizzata principalmente per supportare Internet Explorer 8 e inferiori.

Supporto dei Browser

[caniuse feature=”css-filters”]

Per i browser che non supportano i filtri, esiste un polyfill.

Link utili

• Specifiche dei Filtri W3C
• Documentazione MDC
• Compatibilità Browser Can I Use