CSS3 Pushing the Limits

Chapter 4

Into the Browser with CSS3 Filters and Blending Modes

Now this is what you've been waiting for! You've probably heard the buzz about reproducing Photoshop-like effects directly in your browser, using only CSS. The Filters module, like most CSS3 modules, is by no means finalized, but it is far enough along that the WebKit-based browsers (Chrome, Safari, and Opera 15+) have shown enough confidence to implement support.

Blending modes, on the other hand, which have been proposed as part of the Compositing and Blending specification, are much further away from being implemented by any of the browsers. The working draft is still very much in development, and considerable changes are likely to come.

Both of these specifications have their roots in SVG, originating as tools for vector graphics, but it was Mozilla's Robert O'Callahan who was among the first to recognize the potential for applying SVG effects to HTML elements using CSS (http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html).

The CSS Working Group and the SVG Working Group have since formed the rather awesomely named FX Task Force, which focuses solely on developing features such as filters and blending modes for use in both CSS and SVG.

From this chapter, you can expect a thorough breakdown of CSS3 filters and the various effects that you can achieve through their use. The chapter finishes by briefly discussing the much younger and much more mutable blending modes feature.

CSS3 Filters ...