CSS filters
There is a glaring problem with box-shadow. As the name implies, it is limited to the rectangular CSS box shape of the element it is applied to. Here’s a screengrab of a triangle shape made with CSS with a box shadow applied:
Figure 8.11: Box shadows don’t always provide the effect you want
Not exactly what I was hoping for. Thankfully, we can overcome this issue with CSS filters, part of the Filter Effects Module Level 1 (https://www.w3.org/TR/filter-effects/).
Here is that same element with a CSS drop-shadow filter applied instead of a box-shadow (you can view the code in example_08-08):
Figure 8.12: A drop-shadow filter effect can apply to more than just boxes
Here is the format for CSS filters:
.filter-drop-shadow {
filter: drop-shadow(8px 8px 6px #333);
}
After the filter property, we specify the filter we want to use, which is drop-shadow in this example, and then pass in the arguments for the filter. drop-shadow...