Chapter 19. Filters, Blending, Clipping, and Masking

Over the past decade, CSS has accumulated some interesting new features. These allow authors to alter the appearance of element with visual filters, specify different ways to visually blend elements with whatever is behind them, and alter the presentation of elements by showing parts and hiding other parts. While these may seem like disparate concepts, they all share one thing in common: they allow elements to be altered in ways that were previously very difficult or impossible.

CSS Filters

The veterans among us may remember that a long time ago, Microsoft put a filter property into their CSS support, which was used to pull in DirectX visual effects. In the time since, CSS has gained a filter property of its own, and while it’s similar in concept to what Microsoft did, it isn’t really the same thing. Among other changes, CSS defines a number of built-in visual filter effects, in addition to permitting the loading of filters defined in external files.

The value syntax permits a comma-separated list of filter functions, with each filter applied in sequence. Thus, ...

Get CSS: The Definitive Guide, 4th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.