Nick Walker

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.

Another day, another Webkit bug. Apply a scale transform to an element that has an SVG graphic as a background and you’ll see bitmap scaling artifacts. Firefox does what you would expect is supposed to happen and continually rasterizes the SVG at new scales. Here’s a demo fiddle.

There’s no work around that I know of.

While working on a recent project, I found myself in need of a spinner graphic. As I think most people do, I hit google looking for something that would work, and while 37signals’ solution was neat, I wanted something that would add minimal non-semantic markup and would be easily scalable.

So, I made this SVG spinner.

Here’s the actual SVG file.