CSS Filters

What's this?

Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit.

In Webkit, filters can be applied to hw accelerated content ( e.g. img { -webkit-transform: translateZ(0); } ). In Chrome, filters on hw accelerated content are still a work in progress (use the --enable-accelerated-filters flag) or enable the feature in about:flags. This includes <video>, which is accelerated by default.

Support: Chrome 18.0.976.0, Webkit nightly

CSS Filter Effects
(from http://html5-demos.appspot.com/static/css/filters/index.html)

-webkit-filter: hue-rotate(30deg);

blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity

Animations:

CSS Filter Effects (from http://html5-demos.appspot.com/static/css/filters/index.html)

CSS Filter Effects
(from http://html5-demos.appspot.com/static/css/filters/index.html)