May 2023
Intermediate to advanced
1126 pages
30h 2m
English
Content preview from CSS: The Definitive Guide, 5th Edition
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
Chapter 20. Filters, Blending, Clipping, and Masking
Several special properties allow authors to alter the appearance of elements 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 difficult or impossible.
CSS Filters
CSS provides a way to apply built-in visual filter effects, as well as custom filters defined in the page or in external files, to elements by way of the filter property.
The value syntax permits a space-separated list of filter functions, with each filter applied in sequence. Thus, given the declaration filter: opacity(0.5) blur(1px);, the opacity is applied to the element, and the semitransparent result is then blurred. If the order is reversed, so too is the order of application: the fully opaque element is blurred, and the resulting blur made semitransparent.
The CSS specification talks of “input images” when discussing filter ...