Фон
Эффекты фильтров существуют уже давно, но были разработаны для работы в SVG. Они фантастически эффективны в применении к изображению таких эффектов, как интенсивность цвета, деформация или размытие, прежде чем оно будет скомпоновано и отображено в документе.
Что ж, еще в 2009 году Mozilla заявила, что SVG недостаточно! В итоге они пошли еще дальше и разрешили использовать фильтры для HTML-контента в Firefox 3.5. Посмотрите вневременную демонстрацию SVG-фильтров Пола Айриша на воспроизводимом <video> . Опять же, работает только в Firefox, но все равно на коленях.
Сегодня
Перенесемся в конец 2011 года, и Adobe (и другие компании) усердно работали над внедрением этой удивительной технологии в CSS. В частности, я имею в виду CSS Filter Effects 1.0 , который WebKit начал реализовывать.
Включение фильтров непосредственно в CSS означает, что ими может воспользоваться практически любой элемент DOM! Изображения, <video> , <canvas> , что угодно.
Будущее
Спецификация также определяет шейдеры CSS , которые в конечном итоге привнесут технологию шейдеров OpenGL в CSS. Это очень ОЧЕНЬ интересно! Однако каждый раз, когда вы открываете графический процессор системы, необходимо учитывать соображения безопасности. По этой причине в WebKit на данный момент реализованы только функции CSS-фильтров.
Поддерживать
Chrome 18.0.976.0 (в настоящее время Canary), Webkit каждую ночь
В Nightlies Webkit фильтры можно применять к контенту с аппаратным ускорением (например img { -webkit-transform: translateZ(0); } ). В Chrome фильтры ускоренного контента все еще находятся в стадии разработки (используйте флаг --enable-accelerated-filters ). Сюда входит <video> , который по умолчанию ускоряется.