14 Masks, shapes, and clipping
This chapter covers
- Applying filters to manipulate the appearance of elements or their backgrounds
- Masking out portions of an element with mask images
- Shaping elements with clip paths
- Floating elements to the left or right
- Aligning text to shapes
In the last chapter, I showed you some techniques for adding visual interest and creativity to the page. I’ll continue down that path in this chapter, beginning with visual effects applied using several functions such as blurring elements or desaturating color. Then I’ll show you how to use masks and clip paths, which provide two ways you can selectively hide portions of an element to create interesting shapes. Finally, you’ll learn about floats and the shape-outside property, which allow you to wrap text around elements and align it to a shape.
These are effects you will need only in certain circumstances; applying them all at once will likely be a bit chaotic, so I will use smaller, isolated examples to illustrate each of these.
14.1 Filters
The filter property allows you to apply an effect such as a blur, color shift, or desaturation to an element. Several of these effects are available, but I’ll begin by using blur as an example to illustrate how the property works.