Efeitos de filtro CSS no WebKit

Contexto

Os efeitos de filtro já existem há algum tempo, mas foram projetados para funcionar no SVG. Eles são extremamente eficazes na aplicação de efeitos como intensidade de cor, distorção ou desfoque em imagens antes de serem compostas e renderizadas no documento.

Bem, em 2009, o Mozilla disse que o SVG não era suficiente! Eles acabaram levando os filtros um passo adiante e permitiram em conteúdo HTML no Firefox 3.5. Confira a demonstração atemporal de filtros SVG feita por Paul Irlanda em um <video> em reprodução. Novamente, ele só funciona no Firefox, mas continua funcionando bem.

Hoje

Até o final de 2011, a Adobe (e outras) tem trabalhado muito para levar essa tecnologia incrível para o CSS. Especificamente, quero dizer CSS Filter Effects 1.0, que o WebKit começou a implementar.

Ativar filtros diretamente no CSS significa que praticamente qualquer elemento DOM pode aproveitá-los. Imagens, <video>, <canvas>, o que quiser.

Demonstração de efeitos de filtro de CSS.

Futuro

A especificação também define sombreadores CSS, que, em algum momento, levarão a tecnologia de sombreador OpenGL para o CSS. Isso é MUITO emocionante! No entanto, há considerações de segurança sempre que você abre a GPU de um sistema. Por esse motivo, o WebKit só tem funções de filtro CSS implementadas no momento.

Suporte

Chrome 18.0.976.0 (atualmente canário), Webkit todas as noites

No Webkit noturno, filtros podem ser aplicados a conteúdo acelerado por hardware ( por exemplo, img { -webkit-transform: translateZ(0); }). No Chrome, filtros em conteúdo acelerado ainda estão em fase de desenvolvimento (use a sinalização --enable-accelerated-filters). Isso inclui <video>, que é acelerado por padrão.