The Real Slim Shady
The Real Slim Shady
The Real Slim Shady
10 May 2004 — 40 Comments

Yes, I know... Countless others have noted the tasteful resurgency of drop-shadows, but have we stopped to count the number of sites now featuring two-column layouts with subtle shadowing to set the columns off the background?
We'll call this the Cederholm Effect.
And no, I'm not accusing people of ripping off Dan... we all experience our own Nodes of Inspiration. Have to admit the shadowed column look has found its way into some of my design as well—and I believe it looks pretty swell.
But I begin to wonder, will we one day look back at this year and remember, "Oh yeah, 2004 was when everyone had that column and shadow kick"? Sites big and small are picking up on the effort, and several have even been launched within the last week or so.
A few shady sites of note:
Trends come and trends go, and this looks like one that will be in for a while. The effect adds a nice, soft, gooeyness to a site's complexion and—if done well—adds a depth and personality to what can be the cold medium of the internet.
My list is far from complete, so feel free to add if you know of others. We'll see how far and how long the effect will travel.


pixelkitty says
not to pimp my own wares, but http://pkdesign.pixelkitty.net was launched yesterday with shadow-y goodness!
Dave S. says
2005 will be the year of the anti-shadow, otherwise known as the subtle white glow. Mark my words. (But we all know where it began)
Sam says
As long as the super-crazy bevelled button never, ever, comes back, I will be ok with practically any trend I think.
Joshwa says
Oh, and I was just getting ready to pull out my trusty ol' Photoshop 3 WOW! book to help me with some effects for the Yellowlane redesign. You think bevels are a bad idea? ; )
Jason Santa Maria says
I knew I got it all wrong on my site! I drop-shadowed into the content rather than away from it giving the content a sunken feel. Boy, is my face red :D
Dan Cederholm says
I'm positive I ripped it off from someone else -- but it's amazing how frequently it's used, and how, like Josh, I think it still looks fantastic and I continue to gravitate toward using it. I liken it to applying a nice frame to the page.
But I'm wondering if shadowed borders will be the "rainbow rule" of 2004? (I'm ready to bring those back, BTW)
Keith says
I guess I'll have to add myself to the list, although I can say I wanted to go with a very hard shadow because I didn't want to look like I was ripping off Dan.
Which of course I was. Thanks Dan.
Oh and Josh, nice reference with the Photoshop Wow. I just pulled that one off the shelf for a quick chuckle a few days ago. Classic.
Graham says
I love it (because it's so simple and effective) but feel that it's getting cringeworthy already. As for the roots, it got to be down to Mac OS X - by emulating Apple the design appropriates some of their slickness.
Tomas says
Dynamic and variating lighting is what makes illustrations come alive. This specific use of shadows is, perhaps, a trend. But I don't think the overall use of shadows is going to decline once this trend -- if it is one -- passes, but rather the opposite. Design trends set aside, we're the very first generation of web designers, ever, this is us growing up, shaping the web as we go.
Bryan says
Personally, I am a big fan of the effect. I am sure it will run itself out eventually and some of these CSS Guru / Powerplayers will come up with something else, but I have utilized it in my new design of a blog I am creating, Juiced Thoughts. Here is a quick link
Juiced Thoughts
So hopefully I get this MovableType working with that new design and all will be right with the world :)
Joshwa says
Do you remember the edition of Photoshop WOW that had the 17-step process to creating type that looked like a license plate bevel?
Of course, the orginal WOW book was written for version 2, which had no layer support... so creating any effect took 17 steps and just as many channels to accomplish. Save selection, Gaussian Blur, Offset, Load Channel, Delete Selection... and viola! A drop shadow!
James at Practical CSS says
Don't forget some bigtime sites -- M&M's uses a Cederholm on their website as well: http://www.mms.com
Andy Baio says
The first site I noticed using it was Dominey's PGA Championship from April 2003. Anyone have an earlier example?
Cameron Moll says
Funny how trends come and go. Anywhere and everywhere. I'm sitting here listening to Lisa Loeb's "Stay (I Missed You)" from 1995 (remember that one?). I grew up playing drums, and in the mid-nineties a fair share of contemporary drummers would tighten their snares as much as possible, creating a very light, short sound, in direct contrast to the loose snares of the eighties that seemed to ring endlessly with a deep sound. The snare in "Stay" is quite indicative of the style at the time, which isn't used quite as much today.
I expect the drop-shadow "kick" to follow a similar trend.
Joshwa says
Speaking of, in case you need some for your latest web masterpiece... here's a complete library of Rainbow Rules.
Blake Scarbrough says
You know who's fault it really is? Photoshop for making it so easy to make dropshadows. It used to be overly abused in the late nineties but I think the latter ones much more tasteful.
John Serris says
I guess I'm guilty too. I've been doing this for years though, even on some _very_ old designs still sitting on my hard drive.
Someone posted a similar topic a while ago about the new trend being "gradient backgrounds" and linked to my site. I predict the next trend will be tasteful use of BROWN. ;)
Jarek Piórkowski says
Personally, I'd go with GREEN, but then, not everybody is obsessed like I am...
Sergio says
You're talking crazy John! *No one* would use BROWN for a design!! It's untasteful! untasty even!
Matt says
My shadowy redesign is from August 2003, and I think it was mostly inspired by Mac OS X which I still don't use but covet dearly. I had used the shadows on a smaller client gig a few months before and liked how it turned out.
Shaun Inman says
The previous version of my site which launched in October of 2002 had some subtle use of drop-shadows to create depth: si6.
I'd claim to be the originator of the technique but that'd just be foolish. Maybe you should include me twice anyway Josh. :P
Dan Rubin says
The design I'm working on for the Webgraph agency site includes the same sort of treatment, though I've inverted the colors a bit (dark background with a shadow, so more subtle), but I love the look, and think it's one of the best implementations of drop shadows I've ever seen (and I have always been against most drop shadow use :)
I think that Shaun and Cameron use shadows and shading extremely well, along with subtle gradients (which is a more accurate description of this design trend). I used gradients in my Blogger template design, resisting the urge to add left and right shadows (and it's a good thing too, since Dan and Jeffrey both used them in theirs), but they certainly add a nice depth which is often missing from screen design.
I especially like the fact that minimal designs can make use of the effect while remaining minimal.
Mike P. says
Our site went shadows too, *and* we're launching a new site that uses some shadowing pretty much of the photomatt variety.
However long it lasts, the contrast between browsing thru an old copy of 'webdesign index' kicking around here and then scrolling through the css vault was strong - this new trend is beautiful!
Christian says
I like trends. Trends are good. Where would we be today if we didn't have the eighties? Huh? We'd still be back in the seventies thats where! I'm definately getting the shadows stuff'ns. :)
patrick h. lauke says
somebody already mentioned OS X, but I'd also add WinXP to the probable culprits of the latest cuddly-wuddly drop shadow and *ack* gradient craze with cutesy icons. start using a hammer, and everything looks like a nail...i'd call it neo-kitsch, but we'll let the historians decide ;)
i call for a return to basics
Jared says
http://www.jinxy.net/test
I have to admit, I am a shadow junky too.
Scott says
There are only so many tricks in the bag. Shadows have been used to add perceived depth to 2-dimensional objects for aeons.
After all, discounting the "shadow" part of "two-column layouts with subtle shadowing", if you've got two disparate areas of content, how else are you supposed to arrage them other than in two columns or two rows? (Yes, possibly a few esoteric answers, like "on top of each other", but you get my point.)
Aaron says
I admit, I use the shadow trick as well: http://www.beatledork.com/blog/youarehere.html
Patrick H. Lauke says
and more shadowy stuff from Cederholm: http://www.simplebits.com/archives/2004/05/14/espn_search.html
Patrik says
I've never heard of Dan Cederholm, I'm a "fan" of dropshadows though and have used it in my pagedesigns at least for four years. My oldest design that I can think of that is still online (and it's going to be re-designed pretty soon) is http://www.artistnoje.nu/
Cheers,
Patrik
Rik Abel says
i like them so much that i've used THREE drop shadows on my blog. that's just the kind of wild and crazy guy i am.
Todd Lambert says
Well, back in my day, they didn't have any stinkin drop shadows. We had to make them by hand using several nested tables with graduating colors - You kids these days have it so easy with your fandangled Photoshop!
Me, I stuck with clean sharp lines, just trying to buck the trend! 8-)
http://ToddLambert.com
Kevin T says
I'm guilty of this as well. I have 3 sites on the work that currently use some form of drop shadow to diferenciate content.
mark rushworth says
its what i call YA2CCSSS (Yet Another 2 Column CSS Site) ***BORING***, i thought this was supposed to be NEW media design, not re-hashing one layout! ***vent wrath***
mark
zeldman says
When I saw screen captures of OS X, I thought, "Drop shadows? Are they kidding?"
But when I started using OS X, I realized that Apple's designers were on to something. When a foreground element (such as this Yellowlane comment popup window) casts a subtle shadow on a background element (such as the Yellowlane "Real Slim Shady" page beneath the comment popup window), if it's done well, it helps one distinguish foreground from background and creates a nice little aesthetic experience.
I didn't think about drop-shadows again until I saw Todd Dominey's PGA Golf site design. I don't know if Todd was inspired by OS X. You'd have to ask him. But the PGA site was beautiful, and subtle drop-shadows were one of many reasons why. That got me thinking about using them. And soon enough, I was.
Trends are interesting. Some are even good.
Miriam says
Guilty, but with stampy goodness.
Bob says
My contribution to the slim shady, with a twist: shadow down one side only where the "sidebar" pops out...
http://www.builtforthefuture.com/2004/
Joshwa says
For the time being, I think the Slim Shady effect has had a very positive impact on standards-based web design. Given, some executions are better than others, but if anything it has begun to stretch the imagination of what you can accomplish with CSS.
It is certainly better than the sterile block and outline look many have equated with CSS in the pre-ZenGarden years. And, it is certainly not anything as bad as the horizontal rule kick. There is a HUGE difference.
Jeremy Flint says
The earliest I remember seeing the drop shadow was on the PGA Championship site ( http://www.pga.com/championship/2004/ ), when it was redesigned my Todd Dominey.
ESPN uses it too, but I can not recall which came first.
Alex Nin says
Well, well, everyone talking about the trends of drop shadows, but as I know a drop shadow is an element of design not a piece of cake to put everywhere!
Into the right context could be a nice thing as a Brown colour could be or anything.
Trends are just trends, but good design is the invisible element that make you comfortable.
Remember: less is more.