October 11, 2011
CSS shaders: Hell yeah.
“Flash’ll be dead soon,” I thought. “Web browsers will add animation support, plus live filters, and let me mix it all together on a page.”
That was back in 1999.
HTML animation is progressing, but it still lacks much of the richness that Flash Player can provide. So, what can we do about it?
Adobe’s contributing technology & expertise to enable CSS shaders. CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations. Check it out:
So, yeah: Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash.
Crazy, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe’s ability to sell you tools for creating those experiences. The different playback technologies are just means to those ends.
Adobe has collaborated with Apple & Opera and has now submitted the spec to the W3C. The code is
checked into WebKit under consideration for inclusion in WebKit, with this demo recorded using a build of Chromium. In addition Microsoft has added support for SVG filters in the IE10 platform preview. [Update: IE10 supports SVG filters, but it doesn’t support Filter Effects on HTML or CSS shaders.] For details, sample code, etc., check out this post from Vincent Hardy.