Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Outer Shadow on Site Containers

Posted by Andrew Faulkner on September 19th, 2005.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

http://fadtastic.net/

Andrew Faulkner has posted 208 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Faulkner

Full Profile →

Outer shadows are obviously back in fashion after a stint in oblivion. For those not in the know, these (now overused) details used to be found on graphical elements like buttons, stickers and so on. However, the new wave of slick designs have adopted them for use on site ‘containers.’ To see an example, and to save me typing, here’s an example:

http://www.mariocarboni.com/

Note the drop shadow around the entire site’s edge. Nice touch, yes? In this case I happen to think it’s beautifully done. I also believe that this example works because of its body and content background colour contrast (or lack of it.) Both are smoky white in appearance and very similar. The designer has obviously used the outer shadow to bring the site out of the background giving instant lift to the content.

Now here’s the catch. I see many designs on the CSS showcases that use this effect but not many that use it at its best. The following sites already have enough contrast between body and content backgrounds and still use the effect. I don’t think the effect needed to be applied on them:

http://www.biddlebugs.com/ - Looks a little dirty (the effect - not the content.)
http://www.zbiroh.com/uvod/ - A little over the top.
http://www.bsolve.co.za/ - Unnecessary when contrast at left hand side is already high.

Some may use this as a technique to project content forward. I like that. Some may use it because they’ve seen others do it and want to do it too. I don’t like that.

I’ll leave you to debate whether this is a useful technique or just a fad.

Share This

Make A Comment

( 4 so far )

blockquote and a tags work here.

4 Responses to Outer Shadow on Site Containers

Comments RSS Feed

As someone who has thrown in the gratuitous dropshadow effect sometimes for the sheer sake of it, I think it helps when you have a colorful background or styled background and want to add depth. However, I think if you are going to criticize, you should at least offer suggestions on HOW to improve their technique. just my 2 cents.

Brian Breslin
September 28th, 2005
#

Brian,

I did mention when I liked and disliked it, although that might not be what you’re asking.

I would like to see the technique used to ‘bring content forward’ when used on low contrast sites. High contrast sites (background to content) don’t need this effect in my opinion and would maybe benefit from a thick solid border. That’s a valid option for high contrast containers in my view.

Andrew Faulkner
September 28th, 2005
#

ah ok, i get what you’re trying to convey now. I scanned this quickly and thought you were just saying it was poorly executed in general. i agree when you have a black bg, and a white foreground the shadow seems wasteful

Brian Breslin
September 29th, 2005
#

Hi Andrew,

You’ve got a valid point, gratuitous use of shadows just for the sake of it is pretty silly, and far too common…

However, on bSOLVe’s site, the dropshadow only serves to outline the footer, which doesn’t benefit from the high contrast lines as a frame. Because it’s tiled, it happens to cover the whole vertical space - however, in my opinion, it’s subtle enough to not cause any harm.

Great design, BTW!

Martin
January 12th, 2006
#

↑ Jump up to the comment form

Related In Some Way, Shape Or Form

The above post has obviously kept you amused. Why not discover similar material:

The posts Trends Past and Present, Show The Glow, CSS3: what it means, and what it doesn’t, Big Players (not) Using Trends, The ‘Great Sticker War II’, are related to this post.

Or why not take time out to find out about the author of the post.