Drop Shadows

13 May 2004


A Blue Perspective: Drop Shadows

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. 1/3

    Hass commented on 13 May 2004 @ 08:42

    It's a hot topic!

  2. 2/3

    Pierce commented on 14 May 2004 @ 05:47

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

  3. 3/3

    Rob Mientjes commented on 18 May 2004 @ 07:11

    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.

  4. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed