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 screen grab of a triangle shape made with CSS (you can view the code in example_06-08) with a box shadow applied:

Not exactly what I was hoping for. Thankfully, we can overcome this issue with CSS filters, part of the Filter Effects Module Level 1 (http://www.w3.org/TR/filter-effects/). They are not as widely supported as box-shadow, but work great with a progressive enhancement approach. If a browser doesn't understand what to do with the filter it simply ignores it. For supporting browsers, the fancy effects are rendered.

Here is that same element with a CSS drop-shadow filter applied instead of a box-shadow:

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, drop-shadow in this example, and then pass in the arguments...