Información general
Los efectos de filtro existen desde hace tiempo, pero se diseñaron para que funcionen en SVG. Son fantásticamente potentes para aplicar efectos como la intensidad del color, la deformación o el desenfoque de una imagen antes de que se componga y se renderice en el documento.
En 2009, Mozilla dijo que los SVG no eran suficientes. Llevaron los filtros un paso más allá y les permitieron usar el contenido HTML en Firefox 3.5. Echa un vistazo a la atemporal demostración de filtros SVG en un <video> en reproducción. De nuevo, solo funciona en Firefox, pero no te preocupes.
Hoy
Avanza hacia fines de 2011 y Adobe (y otros) han trabajado arduamente para llevar esta increíble tecnología a las CSS. En concreto, me refiero a Efectos de filtro de CSS 1.0, que WebKit comenzó a implementar.
Habilitar los filtros directamente en CSS implica que casi cualquier elemento del DOM puede aprovecharlos. Imágenes, <video>, <canvas>, lo que sea.
Perfil
En la especificación, también se definen los sombreadores de CSS, que con el tiempo llevarán la tecnología de sombreador OpenGL a CSS. ¡Eso es muy emocionante! Sin embargo, existen consideraciones de seguridad cada vez que abres la GPU de un sistema. Por esta razón, por el momento, WebKit solo tiene funciones de filtro de CSS implementadas.
Asistencia
Chrome 18.0.976.0 (actualmente versión canary), Webkit todas las noches
En las versiones nocturnas de Webkit, los filtros se pueden aplicar al contenido acelerado por hardware ( p.ej., img { -webkit-transform: translateZ(0); }). En Chrome, los filtros de contenido acelerado aún están en curso (usa la marca --enable-accelerated-filters). Esto incluye <video>, que se acelera de forma predeterminada.