배경
필터 효과는 한동안 사용되었지만 SVG에서 작동하도록 설계되었습니다. 이미지를 합성하고 렌더링하기 전에 색상 강도, 뒤틀기 또는 흐리게 처리와 같은 효과를 적용할 때 굉장히 강력한 효과를 발휘합니다.
Mozilla는 2009년에 SVG만으로는 충분하지 않다고 말했습니다. 또한 필터를 한 단계 더 발전시켜 Firefox 3.5에서 HTML 콘텐츠에도 적용할 수 있게 되었습니다. 재생 중인 <video>에서 Paul Irish의 시대를 초월한 SVG 필터 데모를 확인하세요. 다시 말하지만, Firefox에서만 작동하지만 여전히 가능합니다.
오늘
Flash는 2011년 말에 출시될 예정이며 Adobe를 비롯한 여러 회사는 CSS에 이 놀라운 기술을 도입하기 위해 열심히 노력해 왔습니다. 구체적으로 말씀드리자면 WebKit에서 구현하기 시작한 CSS Filter Effects 1.0이 있습니다.
CSS에서 직접 필터를 사용 설정하면 거의 모든 DOM 요소가 필터를 활용할 수 있습니다. 이미지, <video>, <canvas> 등의 이름을 지정합니다.
향후 일정
사양은 또한 OpenGL 셰이더 기술을 CSS에 가져올 CSS 셰이더를 정의합니다. 정말 기대가 큽니다. 하지만 시스템의 GPU를 열 때마다 보안 고려사항이 있습니다. 이러한 이유로 WebKit에는 현재 CSS 필터 함수만 구현되어 있습니다.
지원
Chrome 18.0.976.0 (현재 카나리아), Webkit Nightly
Webkit 나이틀리에서 필터를 하드웨어 가속 콘텐츠에 적용할 수 있습니다 ( 예: img { -webkit-transform: translateZ(0); }). Chrome에서는 가속 콘텐츠에 대한 필터가 계속 작동합니다 (--enable-accelerated-filters 플래그 사용). 여기에는 기본적으로 가속되는 <video>가 포함됩니다.