ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon
Future Trends: CSS Custom Filters
An Adobe technology previously known as Web Shaders, the W3C has adopted this new technology as a proposal
named CSS Custom Filters.
The standard filters explored in Chapter 9 might be best described as simple image converters: hue-rotate,
blur, and sepia consistently shift all the pixels of the affected image, but nothing more. Standard CSS Filters
cannot affect individual pixels: you can’t use a filter on half an image, nor can you use a filter to distort an image.
Custom Filters explicitly splits this process into two separate functions: programmable fragment shaders can
be used to adjust the color of pixels, animate wipes, and create custom transitions; vertex shaders treat the area
of every DOM element as a visual mesh, allowing the designer to ripple, bend, twist, and distort the surface of
images as well as every other element.
A call to a custom filter, as proposed in the current specification, looks like Listing 10-2.
Figure 10-5. Screenshot of Tumult Hype animation UI