Informazioni sugli effetti del filtro CSS

Introduzione

I filtri sono un potente strumento che gli autori del web possono utilizzare per ottenere effetti visivi interessanti. In questo articolo illustreremo la cronologia degli effetti dei filtri, cosa fanno e come utilizzarli. Analizzeremo tutti i filtri predefiniti definiti per CSS con alcuni esempi. Tratteremo anche considerazioni relative alle prestazioni per l'utilizzo su computer e dispositivi mobili, poiché conoscere l'impatto della velocità dei filtri è importante per una buona esperienza utente. Infine, esamineremo lo stato attuale dell'implementazione nei browser moderni.

Passato, presente e futuro degli effetti dei filtri

Gli effetti del filtro sono stati creati come parte della specifica Scalable Vector Graphics (SVG). Sono stati creati per applicare una serie di diversi effetti di immagine basati su pixel a un disegno vettoriale. Con il passare del tempo, man mano che i fornitori dei browser aggiungevano funzionalità SVG, l'utilità dei filtri è diventata evidente. Robert O'Callahan di Mozilla ha ideato la brillante idea di utilizzare i filtri SVG tramite l'applicazione di CSS a contenuti HTML "normali". Robert ha prototipato una prima versione che mostrava l'efficacia della combinazione di filtri e stile CSS. I gruppi di lavoro CSS e SVG nel W3C hanno deciso di armonizzare l'uso dei filtri sia per HTML che per SVG tramite lo stile CSS, e così è nata la proprietà "filter" per i CSS. In questo momento, una task force congiunta di persone che lavorano a CSS e SVG sta lavorando sodo per rendere i filtri universalmente utili. Puoi trovare le specifiche attuali per tutti questi elementi qui.

Nuova vita per la proprietà CSS "filtro"

A volte Deja Vu colpisce uno sviluppatore web quando vede un "filtro" negli stili CSS. Ciò è dovuto al fatto che le vecchie versioni di Internet Explorer avevano una proprietà "filtro" esposta tramite CSS per eseguire alcune funzionalità specifiche della piattaforma. Questa proprietà è stata ritirata a favore della proprietà "filtro" standard, che ora fa parte di CSS3. Pertanto, quando vedi "filtrare" come un filtro in alcune vecchie pagine web, non c'è bisogno di confondersi. La nuova proprietà "filter" è quella in cui si trova tutta l'azione e le nuove versioni di IE la implementano come tutti i browser moderni.

Come funzionano i filtri

A cosa serve esattamente un filtro? Il modo più semplice per pensare a un filtro è come un passaggio di post-elaborazione che fa qualcosa di magico dopo che tutti i contenuti della pagina sono stati disposti e disegnati.

Quando un browser carica una pagina web, deve applicare gli stili, eseguire il layout ed eseguire il rendering della pagina in modo che sia qualcosa da guardare. I filtri vengono attivati dopo tutti questi passaggi e appena prima che la pagina venga copiata sullo schermo. Scattano un'istantanea della pagina visualizzata come immagine bitmap, quindi eseguono alcune magie grafiche sui pixel dell'istantanea e poi disegnano il risultato sopra l'immagine della pagina originale. Puoi immaginarli come un filtro posizionato sulla parte anteriore dell'obiettivo di una fotocamera. Ciò che vedi attraverso l'obiettivo è il mondo esterno modificato dall'effetto del filtro.

Ciò significa che occorre tempo per disegnare una pagina con filtri, ma il loro corretto utilizzo avrà un impatto minimo sulla velocità del sito.

Inoltre, così come puoi sovrapporre vari filtri uno davanti all'altro sull'obiettivo della fotocamera, puoi applicare un numero arbitrario di filtri uno dopo l'altro per ottenere tutti i tipi di effetti.

Filtri definiti utilizzando SVG e CSS

Poiché i filtri provenivano originariamente da SVG, ci sono diversi modi per definirli e utilizzarli. Il file SVG stesso ha un elemento <filter> che aggrega le definizioni dei vari effetti di filtro utilizzando la sintassi XML. L'insieme di filtri definiti dal CSS sfrutta lo stesso modello grafico, ma si tratta di definizioni molto più semplici e facili da utilizzare in un foglio di stile.

La maggior parte dei filtri CSS può essere espressa in termini di filtri SVG e, se vuoi, CSS ti consente anche di fare riferimento a un filtro specificato in SVG. I progettisti dei filtri CSS si sono impegnati al massimo per semplificare l'applicazione di un filtro per gli autori del web, pertanto questo articolo tratterà solo i filtri disponibili direttamente da CSS, ignorando per il momento le definizioni SVG.

Come applicare un filtro CSS

Puoi utilizzare i filtri CSS usando la proprietà "filter" applicata a qualsiasi elemento visibile della tua pagina web. Per un esempio molto semplice, potresti scrivere qualcosa del

div { { % mixin filter: grayscale(100%); % } }

in questo modo, i contenuti all'interno di tutti gli <div>elementi della pagina diventano grigi. Ideale per rendere la tua pagina un'immagine della TV degli anni '40.

La maggior parte dei filtri assume una qualche forma di parametro per controllare il livello di filtraggio. Ad esempio, se vuoi che i tuoi contenuti si trovino a metà strada tra il colore originale e una versione in scala di grigi, procedi nel seguente modo:

div { { % mixin filter: grayscale(50%); % } }

Se vuoi applicare una serie di filtri diversi uno dopo l'altro, è facile. Devi solo metterli in ordine nel tuo CSS, in questo modo:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

In questo esempio vengono generati prima tutti i colori originali in scala di grigi e poi viene applicato un effetto seppia, ottenendo il seguente aspetto:

Grazie alla flessibilità disponibile per l'applicazione dei filtri uno dopo l'altro, è possibile ottenere tutti i tipi di effetti: sta alla tua immaginazione sperimentare per ottenere risultati sorprendenti.

Quali effetti dei filtri sono disponibili utilizzando CSS

Il meccanismo di filtro SVG originale è potente ma allo stesso tempo può essere impegnativo da usare. Per questo motivo, il CSS introduce una serie di effetti di filtro standard che rendono il loro utilizzo molto semplice.

Diamo un'occhiata a ciascuno di questi e vediamo cosa fanno.

scala di grigi(quantità)

In questo modo, il colore della nostra immagine di input viene convertito in una tonalità di grigio. L'importo applicato controlla la quantità di conversione in grigio applicata. Se è al 100%, tutto sarà di una tonalità di grigio, se è lo 0% i colori rimangono invariati. Puoi utilizzare un numero in virgola mobile qui se preferisci alle percentuali, ad esempio 0 funziona come 0%, mentre 1,0 funziona come 100%.

seppia(importo)

In questo modo, i colori trasmessi in una tonalità seppia come nelle vecchie fotografie. L'attributo "quantità" applicato funziona come per il filtro "scala di grigi": 100% rende tutti i colori completamente seppia e valori più piccoli consentono di applicare l'effetto in proporzioni minori.

saturare(quantità)

Questo applica un effetto di saturazione dei colori ai colori che li rendono più vividi. È un effetto davvero incredibile che può far somigliare le foto a poster o cartoni animati.Questo effetto consente anche di utilizzare un valore superiore al 100% per enfatizzare davvero la saturazione. Sicuramente un effetto che può rendere le cose molto eccentriche!

tonalità-rotazione(angolo)

Questo è un effetto tipo "geek dei colori" che può essere usato per ottenere risultati interessanti. La funzione consiste nello spostare i colori dell'immagine di input in modo che abbia un aspetto completamente diverso. Se riesci a immaginare uno spettro di colori che passa dal rosso al viola intorno a una ruota dei colori, questo effetto prende il colore originale sulla ruota come input e lo ruota in base al parametro "angolo" per produrre il colore sulla ruota su cui è stato ruotato come valore colore di output. In questo modo, tutti i colori dell'immagine vengono spostati della stessa "angolazione" sul volante. Si tratta ovviamente di una semplificazione di ciò che fa, ma speriamo che sia abbastanza simile da avere senso.

invert(importo)

Questo effetto capovolge i colori: se la quantità applicata è pari al 100%, l'output sarà come un negativo fotografico delle vecchie macchine fotografiche. Come in precedenza, l'uso di valori inferiori al 100% applicherà progressivamente l'effetto invertito.

opacità(quantità)

Se vuoi che i contenuti filtrati sembrino semitrasparenti, questo è quello che fa per te. Il valore "amount" definisce il livello di opacità dell'output. Pertanto, un valore del 100% è completamente opaco, quindi l'output sarà esattamente uguale all'input. Se il valore scende al di sotto del 100%, l'immagine di output diventerà meno opaca (più trasparente) e ne vedrai sempre meno. Questo ovviamente significa che se si sovrappone a qualcos'altro sulla pagina, i contenuti sottostanti inizieranno a diventare visibili. Una "quantità" pari allo 0% indica che la quantità sparirà completamente, ma tieni presente che è comunque possibile ottenere eventi come i clic del mouse e così via su oggetti completamente trasparenti. Questo è particolarmente utile se vuoi creare aree cliccabili senza visualizzare nulla.

Funziona come la proprietà "opacity" che già conosci. In generale, la proprietà "opacità" del CSS non ha accelerazione hardware, ma alcuni browser che implementano filtri utilizzando l'accelerazione hardware accelerano la versione dell'opacità del filtro per prestazioni molto migliori.

luminosità(quantità)

Funziona esattamente come il controllo della luminosità sulla TV. Regola i colori tra completamente nero e colore originale in base al parametro "amount". Se imposti questa impostazione sullo 0%, vedrai solo il nero, ma se il valore sale verso il 100%, l'immagine originale aumenta sempre di più, fino a raggiungere il 100%, dove è uguale all'immagine di input. Ovviamente puoi andare avanti, quindi un valore come 200% rende l'immagine due volte più luminosa dell'originale. È l'ideale per regolare gli scatti in condizioni di scarsa illuminazione.

contrasto(quantità)

Più controlli dalla TV! In questo modo viene regolata la differenza tra le parti più scure e più chiare dell'immagine di input. Se usi lo 0%, si finisce per finire con il nero, come per la "luminosità", quindi non troppo interessante. Tuttavia, se aumenti il valore fino al 100%, la differenza dell'oscurità cambia fino a raggiungere il valore 100% e di nuovo l'immagine originale. Puoi anche andare oltre il 100% per questo effetto, che aumenta ulteriormente la differenza tra i colori chiari e scuri.

sfocatura(raggio)

Se vuoi un bordo morbido per i tuoi contenuti, puoi aggiungere una sfocatura. Questo sembra la classica vaselina su una lastra di vetro che un tempo era una tecnica popolare di realizzazione cinematografica. Macchia tutti i colori insieme e diffonde il loro effetto, un po' come quando i tuoi occhi sono sfocati. Il parametro "raggio" determina il numero di pixel sullo schermo che si confondono l'uno con l'altro, pertanto un valore più alto creerà una sfocatura maggiore. Nessuno ovviamente lascia l'immagine invariata.

drop-shadow(shadow)

È così bello poter far apparire i tuoi contenuti all'aperto al sole con un'ombra sulla terra alle spalle: l'ombra è ovviamente la cosa che fa. Scatta un'istantanea dell'immagine, la crea con un solo colore, la sfoca, quindi esegue un lieve sfalsamento del risultato in modo che appaia come un'ombra dei contenuti originali. Il parametro "shadow" passato è un po' più complicato rispetto a un singolo valore. È una serie di valori separati da uno spazio e anche alcuni sono facoltativi. I valori "shadow" controllano dove viene posizionata l'ombra, la quantità di sfocatura applicata, il colore dell'ombra e così via. Per informazioni dettagliate sulla funzione dei valori "shadow", la specifica Sfondi CSS3 definisce "box-shadow" in modo molto dettagliato. Alcuni esempi di seguito ti daranno un'idea delle varie possibilità.

Questa è un'altra operazione di filtro simile alla funzionalità CSS esistente disponibile tramite la proprietà "box-shadow". Se utilizzi l'approccio basato sul filtro, alcuni browser potrebbero avere accelerazione hardware come descritto per l'operazione di "opacità" descritta in precedenza.

URL che fanno riferimento a filtri SVG

Poiché i filtri hanno origine come parte del file SVG, è logico che dovresti essere in grado di applicare uno stile ai tuoi contenuti utilizzando un filtro SVG. Con l'attuale proposta di proprietà "filtro", è facile ottenere questo risultato. Tutti i filtri in SVG sono definiti con un attributo "id" che può essere utilizzato per fare riferimento all'effetto del filtro. Pertanto, per utilizzare un filtro SVG da CSS, è sufficiente farvi riferimento utilizzando la sintassi "url".

Ad esempio, il markup SVG per un filtro potrebbe essere:

<filter id="foo">...</filter>

Poi da CSS puoi semplicemente eseguire queste operazioni:

div { { % mixin filter: url(#foo); % } }

e voilà! A tutti gli elementi <div nel documento verrà applicato lo stile delle definizioni del filtro SVG.

personalizzato (disponibile a breve)

A breve saranno disponibili filtri personalizzati. Sfruttano la potenza della GPU grafica per utilizzare un linguaggio di ombreggiatura speciale per creare effetti sorprendenti creati solo dalla tua immaginazione. Questa parte della specifica del "filtro" è ancora in fase di discussione e evoluzione, ma non appena sarà disponibile in un browser vicino a te, ci assicureremo di scrivere ulteriori informazioni su ciò che è possibile ottenere.

Considerazioni sul rendimento

Una cosa che interessa a ogni sviluppatore web è il rendimento della propria pagina web o applicazione. I filtri CSS sono molto utili per gli effetti visivi, ma possono anche influire sul rendimento del tuo sito.

Capire cosa fanno e come questo influisce sul rendimento è importante, soprattutto se vuoi che il tuo sito funzioni in modo ottimale sui dispositivi mobili se supportano i filtri CSS.

Innanzitutto, non tutti i filtri vengono creati nello stesso modo. Infatti, la maggior parte dei filtri viene eseguita molto rapidamente su qualsiasi piattaforma e ha un impatto minimo sulle prestazioni. Tuttavia, i filtri che eseguono qualsiasi tipo di sfocatura tendono a essere più lenti degli altri. Questo ovviamente significa "sfocatura" e "ombra". Questo non significa che non devi usarli, ma capire come funzionano potrebbe essere d'aiuto.

Quando esegui un blur, questo mescola i colori dei pixel intorno al pixel di output per generare un risultato sfocato. Quindi, supponiamo che se il parametro radius sia 2, il filtro deve osservare due pixel in ogni direzione intorno a ciascun pixel di output per generare il colore misto. Questo accade per ogni pixel di output, quindi molti calcoli diventano più grandi quando aumenti il valore di radius. Poiché blur guarda in tutte le direzioni, raddoppiare il "raggio" significa che devi guardare un numero di pixel 4 volte superiore, quindi di fatto è 4 volte più lento per ogni raddoppio di radius. Il filtro drop-shadow contiene un elemento blur come parte del proprio effetto, pertanto anch'esso si comporta come blur se modifichi le parti radius e spread del parametro shadow.

Non tutto è perduto con blur poiché su alcune piattaforme è possibile utilizzare la GPU per accelerarlo, ma questo non sarà necessariamente disponibile in tutti i browser. In caso di dubbi, la soluzione migliore è sperimentare con il "raggio" che ti dà l'effetto desiderato, quindi cerca di ridurlo il più possibile mantenendo un effetto visivo accettabile. Questa ottimizzazione renderà più felici i tuoi utenti, soprattutto se utilizzano il tuo sito da un telefono.

Se utilizzi filtri basati su url che fanno riferimento a filtri SVG, questi possono contenere qualsiasi effetto di filtro arbitrario, quindi tieni presente che anch'essi potrebbero essere lenti, quindi assicurati di conoscere la funzione dell'effetto filtro e prova a utilizzare un dispositivo mobile per assicurarti che il rendimento sia buono.

Disponibilità nei browser moderni

Al momento, diversi effetti filter CSS sono disponibili nei browser basati su WebKit e in Mozilla. Prevediamo di vederli presto in Opera e in IE10. Poiché la specifica è ancora in fase di sviluppo, alcuni fornitori di browser hanno implementato questi contenuti utilizzando i prefissi dei fornitori. Quindi in WebKit dovrai usare -webkit-filter, in Mozilla -moz-filter e tenere d'occhio le altre implementazioni del browser man mano che vengono visualizzate.

Non tutti i browser supportano immediatamente tutti gli effetti di filtro, quindi il chilometraggio varierà. Attualmente, il browser Mozilla supporta solo la funzione filter: url(), senza il prefisso del fornitore, in quanto questa implementazione è antecedente alle altre funzioni degli effetti.

Di seguito abbiamo riassunto gli effetti dei filtri CSS disponibili nei vari browser, con indicatori di prestazione approssimativi relativi al momento in cui vengono implementati nel software. Nota: alcuni browser moderni stanno iniziando a implementarle in hardware (con accelerazione GPU). Se vengono create con il supporto GPU, le prestazioni saranno notevolmente migliorate per gli effetti più lenti. Come di consueto, eseguire test su browser diversi è il modo migliore per valutare le prestazioni.

Effetto filtro	Supporto del browser	Esibizione
scala grigi	Chrome	molto veloce
seppia	Chrome	molto veloce
saturare	Chrome	molto veloce
rotazione-tonalità	Chrome	veloci
invertire	Chrome	molto veloce
opacity	Chrome	può essere lento
luminosità	Chrome	veloci
contrasto	Chrome	veloci
sfocatura	Chrome	lento a meno che non accelerato
drop-shadow	Chrome	può essere lento
url()	Chrome, Mozilla	Varia, da veloce a lento

Altre utili risorse

Una fantastica applicazione di pittura astratta interattiva con filtri che ti consente di sperimentare e condividere le tue opere Assicurati di dare un'occhiata all'eccellente pagina di filtro interattivo di Eric Bidelman Un fantastico tutorial sui filtri con esempi La bozza ufficiale di specifica W3C Filtra Effects 1.0 http://dev.w3.org/fxtf/filters/ Esempio UI creata con i filtri