234 Chapter 18
right, however, has the box-shadow property applied. Because the box-shadow
property doesn’t care about alpha transparency, the shadow follows only the
outline of the box.Figure 18-8: Comparing the drop-shadow() filter (left) with the box-shadow property (right)Multiple Filter Effect Functions
You can apply multiple filter effect functions to an element by simply listing
them in a space-separated list. For example, you could add both blur and a
drop shadow to an element:E { filter: blur(5px) drop-shadow(5px 5px 3px gray); }The order in which you list the functions is important, as that’s the
order in which they’ll be applied. For example, in this next listing two filter
effects are applied, but I’ve changed the order: in the first, the gray-scale()
function is applied before sepia(), and in the second, I’ve reversed it:E { filter: sepia(100%) gray-scale(100%); }
E { filter: gray-scale(100%) sepia(100%); }In the first example, the sepia() function will be applied and then
grayscale(), so all the colors of the sepia() filter effect will be converted to
grayscale. In the second, the grayscale() function will be applied and then
sepia(), so the colors of the sepia() filter effect will show. Example file 18-c
on this book’s website shows how this appears.
Like CSS Transforms (introduced in Chapter 12), when you list mul-
tiple functions in the filter property, any functions not in the list will have
their values returned to the default. For example, in the following listing,
the element loses its sepia() filter effect on hover:E { filter: sepia(100%) blur(2px); }
E:hover { filter: blur(5px); }