Hintergrund
Filtereffekte gibt es schon eine Weile, sie wurden aber für SVG entwickelt. Sie sind fantastisch leistungsstark bei der Anwendung von Effekten wie Farbintensität, Verzerrung oder Unkenntlichmachung eines Bildes, bevor es zusammengesetzt und im Dokument gerendert wird.
Im Jahr 2009 sagte Mozilla, dass SVG nicht ausreicht. Das Unternehmen ging noch einen Schritt weiter und erlaubte sie in HTML-Inhalten in Firefox 3.5. Sieh dir Paul Irishs zeitlose Demo mit SVG-Filtern auf einem <video> an. Auch hier funktioniert dies nur in Firefox, aber das Tool „Bees Knie“ ist trotzdem verfügbar.
Heute
Flash haben wir bis Ende 2011 eingeführt und Adobe (und andere) haben hart daran gearbeitet, diese beeindruckende Technologie in CSS einfließen zu lassen. Konkret geht es um CSS Filter Effects 1.0, die von WebKit implementiert werden.
Wenn Sie Filter direkt in CSS aktivieren, kann sie von praktisch jedem DOM-Element genutzt werden. Bilder, <video>, <canvas>, wie wär's?
Zukünftig
Die Spezifikation definiert auch CSS-Shader, die letztlich die OpenGL-Shader-Technologie in CSS bringen. Das ist SEHR aufregend! Wenn Sie die GPU eines Systems öffnen, müssen jedoch Sicherheitsaspekte berücksichtigt werden. Aus diesem Grund sind bei WebKit vorerst nur CSS-Filterfunktionen implementiert.
Support
Chrome 18.0.976.0 (derzeit Canary-Version), Webkit pro Nacht
In Webkit-Nightly-Versionen 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 Bearbeitung. Verwenden Sie das Flag --enable-accelerated-filters. Dazu gehört auch <video>, das standardmäßig beschleunigt wird.