Page style:

A Blue Perspective: Drop Shadows

Drop Shadows
13 May 2004

Maki has expressed some bemusement at the proliferation of drop shadows on every site that gets released nowadays. JZ pointed it out a bit earlier. People are definitely influenced by what they see all around them, so when drop shadows start popping up on all the big boys' pages, they'll use them in their own. Whether this overuse will eventually lead to their death is an entirely different question to the one I propose to explore (but given their disappearance from the fashionable Web for three years previous, I think the answer can safely be said to be "yes"; it's all about cycles). Irrespective of this looming expiry date, however, I'm an (obvious) fan of "the drop" and not just because they're candy for the eye.

The obvious effect which drop shadows try to achieve is one of layering. They approximate one of the visual cues which the human brain uses in order to determine which objects are closer to us and which are further from us. Most designs assume an invisible light source which shines down onto the page – mostly from the top left, but you can do it from the top right, bottom left, north north west, 137° or 9 O'clock. This suggestion of a disembodied light source lets us know that objects in front cast shadows on those in back. Coupled with the fact that we pay attention to objects in the foreground more than the background, shadows allow the objects on a page to order themselves into a hierarchy simply by having a fuzzy outline.

The classic usage of drop shadows, most recently on Doug's re-design of Blogger, is to separate the main content from the background. This immediately draws your eye to the content, making you disregard the side-effect of fixed width pages – acres of space on either side.

The colouring of the shadows themselves also plays a role in how we perceive the hierarchy of objects on the page. Dark colours recede, light colours advance, so by having a shadow which darkens surrounding areas of an object, the object itself seems brighter, bring it to the fore and also making it seem bigger. Doug emphasises this effect on Blogger by having not only drop shadows, but making the background colours themselves darker.

The last, more fashionable reason for using drop shadows is their realism. Although you'd probably never mistake a Web page as a window to an actual other world, the SitePoint page looks more obviously of-the-digital-realm than Kevin's Alazanto. Granted, the two of them have highly differing styles, but Kevin's subtle use of drop shadows along with other faux-3D effects lends his site a tactile feel that makes you want to interact with it.

Yet again it's a speech that ends with "use the right tool for the job", but drop shadows are a pretty handy tool in use at the moment and I'll be sad when I can't wear my flares and use my drop shadows.

BTW, I was using them before the "year of the drop shadow" :o]


1/3. 13 May 2004 @ 08:42, Hass wrote:
It's a hot topic!

2/3. 14 May 2004 @ 05:47, Pierce wrote:

It seems the only thing more popular than using drop shadows at the moment is writing articles about said use.

3/3. 18 May 2004 @ 07:11, Rob Mientjes wrote:

Actually, Dunstan uses it really nice. And so do you, together with JZ and the other CSS heroes in my Favourites list :P
I only use shadows to state that something is clearly separated (from a background, for example) or as a decoration.

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.