Ever tried to style an image that has irregular bounds (like a trapezoid) with a box shadow? You’ve run into the biggest limitation of the venerable box-shadow; the shadow is always cast by the square bounds of the element. This limitation can be frustrating if you mock up complex shadows and end up having to bake them in.
No more! (Well, soon no more. Filters only work in webkit right now). Just add a CSS filter drop-shadow and you’re set with animatable, resolution independent, transparency aware drop shadows. Here’s a spinner with a drop-shadow. Exciting!
I’m using this on my home page on a handful of svg elements. Can’t wait to see what the wider web does with this tool.