Dynamic Drop Shadows

If you work with dynamic content and you want to have drop shadows around blocks, such as image thumbnails, this trick might work for you. This page simulates a series of thumbnail images of different sizes. The assumption is the server creating this page knows the size of the thumbnail, and can thus create a CSS background-image URL to a web application that can generate shadows on the fly to the correct dimensions.

This approach means the drop shadows on this page are "real" shadows in the sense that they are a simple, single PNG images with real alpha transparency. The shadows are sized correctly for the blocks they are shadowing (they are not stretched to size).

	Simple thumbnail with simple drop shadow. Shadow: http://msqr.us/ma/ShadowServer?w=119&h=90&b=10&r=4&c=9868960.
	Same thumbnail as above with same drop shadow, but on a colored background to show alpha transparency in action.
	A different sized thumbnail showing different sized shadow. Shadow: http://msqr.us/ma/ShadowServer?w=60&h=90&b=10&r=4&c=9868960.

Note the application generating the shadows is a Java servlet, with about 65 lines of code dedicated to generating the shadow. It could easily be implemented in almost any web framework such as PHP, Perl, etc. These shadows were tailored for a specific project, and as such may not render exactly how you'd like for your application, but the point is you could write your own "shadow server" for your specific needs.

This shadow server can generate shadows with different amounts of blur, different colors, and more. Check out http://msqr.us/spot to play around with the settings (page known to work in Gecko and KHTML based browsers).

You can get the source for this shadow server, it is part of a larger project called Media Album. The source is available from Sourceforge, and is the magoffin.matt.ma.servlet.ShadowServer class.