Sfondo
Gli effetti filtro sono disponibili da un po' di tempo, ma sono stati concepiti per funzionare in SVG. Sono estremamente efficaci nell'applicazione di effetti come intensità del colore, distorsione o sfocatura a un'immagine prima che venga composta e visualizzata nel documento.
Nel lontano 2009, Mozilla ha dichiarato che SVG non era sufficiente. Alla fine, hanno fatto un ulteriore passo avanti e li hanno consentiti per i contenuti HTML in Firefox 3.5. Dai un'occhiata alla demo senza tempo di Paul Irish sui filtri SVG in una partita di <video>. Anche in questo caso, funziona solo in Firefox, ma è sempre il massimo.
Oggi
Facciamo un salto fino alla fine del 2011: Adobe (e altri) si sono adoperati per portare questa straordinaria tecnologia nel CSS. In particolare, mi riferisco agli effetti di filtro CSS 1.0, che WebKit ha iniziato a implementare.
Se attivi i filtri direttamente in CSS, quasi tutti gli elementi DOM possono utilizzarli. Immagini, <video>, <canvas>, qualsiasi cosa.
Futuro
La specifica definisce anche gli shader CSS, che alla fine porteranno la tecnologia degli shader OpenGL a CSS. È molto, molto emozionante. Tuttavia, ogni volta che apri la GPU di un sistema devi tenere conto di alcune considerazioni sulla sicurezza. Per questo motivo, per il momento WebKit ha implementato solo le funzioni di filtro CSS.
Assistenza
Chrome 18.0.976.0 (attualmente Canary), Webkit nightly
Nelle build notturne di Webkit, i filtri possono essere applicati ai contenuti con accelerazione hardware ( ad es. img { -webkit-transform: translateZ(0); }). In Chrome, i filtri sui contenuti accelerati sono ancora in fase di sviluppo (utilizza il flag --enable-accelerated-filters). Sono inclusi <video>, che viene accelerato per impostazione predefinita.