Hintergrund
Filtereffekte gibt es schon länger, sie wurden aber für SVG entwickelt. Sie eignen sich hervorragend, um Effekte wie Farbintensität, Verzerrung oder Weichzeichnen auf ein Bild anzuwenden, bevor es zusammengesetzt und in das Dokument gerendert wird.
Schon 2009 hat Mozilla gesagt, dass SVG nicht ausreicht. In Firefox 3.5 wurden Filter schließlich noch weiter ausgebaut und für HTML-Inhalte zugelassen. Sehen Sie sich die zeitlose Demo von Paul Irish zu SVG-Filtern auf einer wiedergegebenen <video> an. Funktioniert auch nur in Firefox, ist aber trotzdem das Nonplusultra.
Heute
Ende 2011 haben Adobe und andere Unternehmen intensiv daran gearbeitet, diese erstaunliche Technologie in CSS zu integrieren. Ich beziehe mich dabei insbesondere auf CSS-Filtereffekte 1.0, die in WebKit implementiert werden.
Wenn Sie Filter direkt in CSS aktivieren, können sie von nahezu jedem DOM-Element genutzt werden. Bilder, <video>, <canvas>, alles ist möglich.
Demnächst
Die Spezifikation definiert auch CSS-Shader, die die OpenGL-Shadertechnologie in CSS einbinden werden. Das ist sehr, sehr spannend! Beim Öffnen der GPU eines Systems sind jedoch Sicherheitsaspekte zu beachten. Aus diesem Grund sind in WebKit derzeit nur CSS-Filterfunktionen implementiert.
Support
Chrome 18.0.976.0 (aktuell Canary), Webkit Nightly
In Webkit-Nightlies können Filter auf hardwarebeschleunigte Inhalte angewendet werden ( z.B. img { -webkit-transform: translateZ(0); }). In Chrome sind Filter für beschleunigte Inhalte noch in der Entwicklungsphase (verwenden Sie das Flag --enable-accelerated-filters). Dazu gehört auch <video>, das standardmäßig beschleunigt wird.