Tło
Efekty filtrów istnieją już od jakiegoś czasu, ale zostały zaprojektowane do działania w pliku SVG. Są one niezwykle skuteczne w sprawie stosowania efektów takich jak intensywność kolorów, zniekształcenie czy rozmycie obrazu przed jego złożeniem i wyrenderowaniem w dokumencie.
Już w 2009 r. Mozilla stwierdziła, że SVG to za mało. W wersji 3.5 Firefoxa filtry zostały jeszcze bardziej rozbudowane i zezwolono na ich stosowanie do treści HTML. Obejrzyj ponadczasowe demo filtrów SVG przygotowane przez Paula Irisha. <video> Znowu działa tylko w Firefoksie, ale i tak jest świetne.
Dzisiaj
Przeskakując do końca 2011 r., warto wspomnieć, że Adobe (i nie tylko) ciężko pracowało nad wdrożeniem tej niesamowitej technologii w CSS. Chodzi o efekty filtrów CSS 1.0, które WebKit zaczął wdrażać.
Włączenie filtrów bezpośrednio w CSS oznacza, że mogą z nich korzystać niemal wszystkie elementy DOM. Obrazy, <video>, <canvas>, cokolwiek.
Przyszła
Specyfikacja definiuje też shadery CSS, które wprowadzą technologię shaderów OpenGL do CSS. To bardzo, bardzo ekscytujące. Jednak zawsze, gdy otwierasz GPU systemu, musisz wziąć pod uwagę kwestie bezpieczeństwa. Z tego powodu WebKit ma obecnie tylko zaimplementowane funkcje filtra CSS.
Pomoc
Chrome 18.0.976.0 (obecnie w wersji canary), Webkit nightly
W wersjach nocnych Webkit filtry można stosować do treści przyspieszanych sprzętowo ( np. img { -webkit-transform: translateZ(0); }). W Chrome filtry dla treści przyspieszanych sprzętowo są wciąż w fazie testów (użyj flagi --enable-accelerated-filters). Obejmuje to <video>, które domyślnie jest przyspieszone.