3 Ways to Add Depth to Any Website with CSS

Mark wrote this on July 06, 2009 in . It has 18 comments.

In design, the small and subtle details can have the biggest impact. Smoother lines, refined textures, and the right shape and size bring a lot to the hardware and software we know and love here at ZURB.

We think the same thing should apply to websites, where finer details can take your designs from good to great. One technique we use regularly is adding depth to a design to give it that extra flair. Here are three ways to add visual depth to any website—with nothing but CSS.

Establishing a Testing Ground

To help illustrate the effectiveness of these CSS tweaks, we'll modify a snippet of code throughout the post as we discuss each tip. We'll start with a lightly colored div with two sections of content divided by an hr already in place. Have a look:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.


Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Now that we've established what we'll be adding depth to, we can move on to the tips!

Tip #1: Raising the Hr

For this effect to work, we start off with our reset hr. We use a technique created by SonSpring to style our hrs here on ZURB.com—his reset turns a default hr into a cross-browser friendly 1px line that everyone can appreciate. Here's a look at the CSS for it:

  1. hr {
  2. margin: 17px 0 18px;
  3. height: 0;
  4. clear: both;
  5. border: solid #ddd;
  6. border-width: 1px 0 0;
  7. }

To add depth to our hr, we simply add another border into the mix. The trick is to use two shades of your background color—one lighter and one darker. In our example, we're using a background color of #eee, so our borders will be #ddd and #fff. Here's what we change our borders to on the hr:

  1. hr {
  2. ...
  3. border-top: 1px solid #ddd;
  4. border-bottom: 1px solid #fff;
  5. }

Here's the result: a recessed border that subtly divides two blocks of content with just that little extra touch. This effect pushes the content outward by making it appear as though the border is slightly indented on the background color. Slick, right?

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.


Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Here's the real kicker. We can take the same borders and flip them to create the opposite effect. Check it out:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.


Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

By reversing our borders, they stand out over the background and actually push the content back slightly, giving your content that recessed look. (Bonus Tip: You can achieve the same effect on lists by applying the top and border borders to your list items.)

Tip #2: Getting that "Recessed Text Look"

If you use a Mac, you've probably noticed this effect already—and loved it. We're of course referring to the text shadow that OS X Leopard adds to the titles in your application windows.

Mac OS X Leopard text effect in a Safari 4 window

Good news: we can do the same thing to our text with a bit of CSS magic using nothing but a text-shadow. CSS text shadows are supported by both Safari (v3+) and Firefox (v3.5+). Let's take a look at the CSS behind this effect:

  1. h4 {
  2. text-shadow: 0 1px 1px #fff;
  3. }

And here's our testing ground updated with the text effect (note: we darkened the background for extra emphasis on the shadow). Compare the difference between the first heading (with) and second (without):

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.


Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

The best advice for using the text-shadow effect is this: don't over do it. The subtle effect here adds a nice touch because it adds depth, but not at the sacrifice of readability. That said—have fun with it!

Tip #3: Fall into the Well

For our final tip, we'll take that light colored background and turn it into a "well." A well is a block of content that's styled to look recessed or indented. The most common applications of the well effect is fieldsets in forms, but it also works well in conjunction with border-radius on blocks of content like our testing ground.

To achieve the well effect, we need only add a slightly darker top border to our div.

  1. div.well {
  2. border-top: 1px solid #ddd;
  3. }

With the rounded corners, the border wraps to the div and creates a unique effect. Here's the updated testing ground:

Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.


Section Heading

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

We can create variations on the well effect, too. Some of our other favorite well effects, working in tandem with the above two tips, are using a full border (all four sides) and using a bottom-border for a raised div.

Full Border

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

Bottom Border

Consectetuer lorem lorem humanitatis vero consequat. Eorum illum est suscipit dolore claritas. Tincidunt est nulla sit erat mirum.

And there you have it! Three tips to refine your website by adding depth with just a bit of CSS. The advantage to these effects is two fold: you get some sweet looking elements on your site and because the overhead in adding them is so low, it's nothing but awesome for you. Enjoy!


It has 18 comments.

Alan Tucker (ZURB) says

Cool. Will have to give this ago on my little app i am building :-) Keep up the good work :-)


Mark (ZURB) says

Oh come on, don't tease us like that, Alan! What do you have up your sleeve? (And when it goes public, I better see some CSS depth in there :p).

Seriously though, let us know how it goes and if you have any ideas for more CSS tips like this—we're always looking for them!


Wayde Christie (ZURB) says

Very nice lil tips. I do stuff like this all the time and it really adds, well, a lot of depth to our designs :D Nice to see that borders can be added to border-radius boxes - will try that out soon for sure. Keep up the great work!


Mark (ZURB) says

Thanks, Wayde. I've seen a lot of your work and really enjoyed the Campaign Monitor projects. It's also easy to see that you have a keen eye for the finer details at Newism—your site is full of them!

What's great about these effects is that they can be done in CSS and Photoshop. Knowing how to take them from one to the other is a great skill to have.


Michele (ZURB) says

I really like the way the third effect looks! And I'd never have thought of it on my own. Thanks very much. (:


Tetsuo (ZURB) says

#3 is a nice, simple effect. The problem with this and particularly your other tips, are that you fail to mention their level of (or lack thereof) support.

For example, styling hr's in Internet Explorer is very troublesome to the point where I would rarely suggest using them at all. Your example says it's a cross-browser technique, but actually viewing it in IE clearly shows otherwise.

The other techniques you should mention are CSS3 functions, and are not supported in older browser versions (and IE, of course).


Mark (ZURB) says

Thanks for the comment, Tetsuo. We've mentioned the level of support, but perhaps we should have put more emphasis on it. Here are a few more details on the browser support of these tricks:

  1. The hr reset is cross-browser, however, the 2 border depth trick for the hr element is not supported by IE6 or IE7. However, you can still recreate this effect with two divs (one with border-top, the other border-bottom).
  2. We specifically called out that CSS text shadows are supported by both Safari (v3+) and Firefox (v3.5+). They are not support by any other browser (save Chrome).
  3. The border property is supported by all browsers, but the border-radius is only supported by Safari 3.x and up and Firefox 2.x+.

The hr in IE is actually not all the bad if you only want a single pixel line, as we do with our reset in the beginning of our demo here. And while IE doesn't support all this CSS, it does have base styles to fall back on and render without a huge problem.

We'd also argue (for the sake of progress?) that websites don't need to look the same in every browser.


Chunk (ZURB) says

I never usually comment on tutorial sites but just feel I have to say a big thanks for this. I'm just getting into html and css, been a traditional print graphic designer for over ten years, and this is really helpful.


Jeff Wolff (ZURB) says

I wish there were more tutorials like this. Very interesting post.


Mark (ZURB) says

@Chunk: Thanks, glad to hear it!

@Jeff: Will be sure to follow it up with more like it then. Thanks!


Hendrik (ZURB) says

text-shadow is a CSS 2.0 Feature and is curently only supported by Opera 9.5 ..., Safari and Konqueror...


Mark (ZURB) says

@Hendrik: Actually, text-shadow is supported by Firefox (3.5+) as well. And for a similar effect in Firefox 2, use opacity: .9999;.


Dwayne Anderson (ZURB) says

Progressive enhancement for the win.


Mark (ZURB) says

@Dwayne: No kidding! Not sure what I'd do without browsers like Safari and Firefox adopting future specs for people like us. Truly amazing what we can do with tools like these :).


Endy (ZURB) says

awesome tutorial...simple but exellent...thanks man...



Get a job, nerd!

via Job Board from ZURB