filtri css cosa sono e come usarli

I filtri fanno impazzire tutti, non c’è foto che prima della sua pubblicazione sui social network non passi da una galleria di filtri, che sia Instagram, Retrica, Snapseed la costante è sempre la stessa, modificare la foto rendendola più figa.

Quando mi interessai per la prima volta ai filtri in css la compatibilità con i vari browser era pressoché nulla. Quest’estate in un piovoso pomeriggio d’agosto (quasi tutti) ho ricontrollato la specifica e sono stati fatti passi da gigante.

I filtri CSS sono un potente tool che permette all’autore di variare gli effetti visivi. Gli effetti variano dalla sfocatura alla saturazione dei colori. L’impiego più comune è quello di “aggiustare” il rendering di un’immagine, sia che essa si trovi all’interno del contenuto sia che essa venga implementata come background.

La sintassi di base è:

Le filter-function sono:

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

Si possono utilizzare funzioni multiple, basta separare con uno spazio.

Esempio di un filtro singolo:

Esempio di filtro multiplo:

Filtri css, funzioni e tanto amore

Per utilizzare i filtri elencati nel paragrafo precedente bisogna specificare il parametro della funzione. Nel caso il valore inserito non sia valido, la funzione restituirà “none” e il filtro non verrà applicato.

Blur()

Questo filtro applica una sfocatura Gaussiana. Il parametro che viene passato (il raggio) definisce il valore della deviazione della funzione Gaussiana . La funzione accetta solamente valori in px, ogni ulteriore valore verrà considerato invalido.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”hGvey” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/hGvey/’>hGvey</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Brightness()

Questa funzione fa apparire l’immagine più o meno luminosa. Il valore ‘0%’ o ‘0’ creerà un’immagine completamente nera. Un valore di ‘100%’ o ‘1’ lascerà l’immagine invariata. Altri valori come ad esempio ‘200%’ o ‘2’ renderanno l’immagine più luminosa.

Non sono consentiti valori negativi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”wpJrH” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/wpJrH/’>wpJrH</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Contrast()

Provvede a sistemare il contrasto dell’immagine. Il valore ‘0%’ o ‘0’ restituirà un immagine completamente grigia. Il valore ‘100%’ o ‘1’ lascerà l’input invariato. Come per la luminosità sono ammessi valori oltre il 100%, provvederanno a fornirne un risultato con un minor contrasto.

Come le altre funzioni i numeri negativi non sono ammessi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”JroIq” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/JroIq/’>JroIq</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Url()

La funzione url() recupera la posizione di un file XML che specifica un filtro SVG.

Drop-shadow()

Molto simile alla proprietà box-shadow css3, la funzione drop-shadow() applica un ombra esterna all’immagine. L’ombra generata è a tutti gli effetti la maschera dell’immagine, sfuocata e decentrata rispetto all’input originale.

Come la sua sorella gemella accetta valori negativi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”cIsjr” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/cIsjr/’>cIsjr</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Anche se la differenza è quasi impercettibile in termini di implementazione, c’è una sostanziale differenza tra le due ombre. L’ombra esterna generata con la funzione risulta più perfomante con l’accelerazione hardware di cui alcuni browser sono dotati.

Un’altra differenza che trovo molto interessate è il modo in cui la funzione drop-shadow() tracci contorni molto più naturali rispetto alla proprietà box-shadow.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”Ajamv” default_tab=”result” user=”Kseso”]See the Pen <a href=’http://codepen.io/Kseso/pen/Ajamv/’>Drop-shadow vs box-shadow (2)</a> by Kseso (<a href=’http://codepen.io/Kseso’>@Kseso</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Grayscale()

Questo filtro css converte i colori dell’immagine in una scala di grigi. Il parametro che viene passato alla funzione equivale alla porzione di conversione. Il ‘100%’ o ‘1’ equivale ad una scala di grigi completa. Il valore ‘0’ non applica nessuna modifica. Anche se la specifica afferma che i valori oltre al 100% sono accettati, gli User Agents danno ogni valore oltre il 100 non valido, quindi di conseguenza non verrà applicato nessun filtro.

Oltre ai valori oltre al 100 anche i valori negativi non sono ammessi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”ECBne” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/ECBne/’>ECBne</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Hue-rotate()

Questa funzione applica all’immagine di input una saturazione cromatica. Il parametro in ingresso definisce il numero di gradi con la quale i colori devono essere aggiustati. Un valore uguale a ‘0’ lascerà l’input invariato. Basandosi su un cerchio il numero massimo di gradi accettati dalla funzione è ‘360deg’.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”xykmd” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/xykmd/’>xykmd</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Invert()

Crea un negativo dell’immagine. Il parametro passato alla funzione definisce la proporzione della conversione. Con un valore del ‘100%’ o di ‘1’ si ottiene un’immagine completamente negativa. Un valore equivalente a ‘0%’ o ‘0’ lascia l’immagine invariata. Come per la funzione grayscale() la specifica dice che sono ammessi valori oltre al ‘100%’ o ‘1’, ma gli User Agents considerano l’input nullo non applicando nessun filtro.

Oltre ai valori oltre al 100 anche i valori negativi non sono ammessi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”GmFho” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/GmFho/’>GmFho</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Opacity()

Identica alla proprietà css opacity non fa altro che applicare una trasparenza all’immagine. Come per altre funzioni, il parametro della funzione definisce la proporzione della conversione. Il valore ‘0%’ o ‘0’ equivale alla completa trasparenza, mentre il valore ‘100%’ o ‘1’ non applica nessun tipo di effetto. Come per altre funzioni viste nei paragrafi precedenti, la specifica riporta la possibilità di utilizzare valori oltre al 100% e che gli User Agents arrotonderebbero sempre a 1, ma con le prove effettuate prima di scrivere questo articolo i valori oltre al 100% vengono completamente ignorati dagli User Agents non facendo applicare di conseguenza il filtro.

Oltre ai valori oltre al 100 anche i valori negativi non sono ammessi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”vqEwz” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/vqEwz/’>vqEwz</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

P.C. (Piccola Considerazione)

Come ho già scritto prima, la funzione opacity() è uguale alla proprietà css opacity. Nel caso tu applicassi all’immagine sia la funzione che la proprietà il valore di quest’ultima verrà moltiplicato per quella della funzione, rendendo ulteriormente trasparente l’immagine.

Saturate()

Questo filtro CSS satura i colori dell’immagine.

Saturates the input image. Il parametro passato alla funzione definisce la proporzione della conversione. Con un valore del ‘100%’ o di ‘1’ non si ottiene nessun tipo di effetto. Un valore equivalente a ‘0%’ o ‘0’ desatura completamente l’immagine. Tutti i valori oltre al 100% daranno come risultato un’immagine super-saturata.

Come in altre funzioni i numeri negativi non sono ammessi.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”giBdm” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/giBdm/’>giBdm</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Sepia()

Converte i colori dell’immagine nei toni del seppia. Il parametro passato alla funzione definisce la proporzione della conversione. Con un valore del ‘100%’ o di ‘1’ si ottiene un’immagine completamente “seppiata”. Un valore equivalente a ‘0%’ o ‘0’ lascia l’immagine invariata. Come per la funzione grayscale() la specifica dice che sono ammessi valori oltre al ‘100%’ o ‘1’, ma gli User Agents considerano l’input nullo non applicando nessun filtro.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”cIzhD” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/cIzhD/’>cIzhD</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusioni

La specifica relativa ai filtri css è ancora in working draft e chissà quanto ancora dovremo aspettare per arrivare ad una standardizzazione completa. Nell’attesa possiamo divertirci con questi fantastici filtri creando delle animazioni o altri tipi di progetti. Cosa ne pensi? Useresti i filtri css nei tuoi progetti? Raccontami tutto…