Adobe has proposed a new set of CSS-based tools that the company hopes will one day become a standard on the web. Following on the heels of Adobe’s effort to improve web layout tools with CSS Regions, Adobe is now proposing CSS Shaders, which would bring high quality cinematic effects to the web without the need for plugins like Flash.

“Shader” is a term pulled from the 3D graphics world; it refers to small programs that create 3D effects, like the rippling motion in a waving flag. The CSS Shaders proposal would add similar tools to the CSS specification, allowing web developers to easily apply cinema-style filter effects to any HTML content. Think grayscale to color transitions, animated shadows, photo-realistic warping and other mainstays of the 3D animation world.

CSS Shaders will look familiar to anyone who’s used the various filters in Adobe Flash since they are essentially the same thing applied to HTML. At the moment there’s no working demo, but you can see CSS Shaders at work in the video below:

Some of what CSS Shaders do in the demo above is already possible using WebGL. However, WebGL’s magic only works on the HTML5 canvas element and can only apply the shader effects that WebGL supports. CSS Shaders on the other hand would allow anyone to write custom shaders, load those shaders via the page’s stylesheet and then apply them to any HTML element.

Adobe has been working with Apple and Opera to create the new CSS Shaders draft proposal at the W3C. The CSS version of shaders borrows some ideas from the earlier draft spec for SVG filter effects (now Filter Effects 1.0), but would apply the filters to HTML rather an SVG.

As for the real world, John Nack, Principal Product Manager at Adobe, reports that the code used for the demo is “under consideration for inclusion in WebKit.” For now though Adobe is using its own build of Chromium to create the demo videos.

If you’d like to learn more about how CSS Shaders work and what sort of filters Adobe has created, head on over to the company’s devnet site where Adobe’s Vincent Hardy offers an overview of CSS Shaders, a look at the proposed syntax and several more (sadly not embeddable) demo movies.

See Also: