3 Ways to Add Depth to Any Website with CSS

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: 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 `hr`s 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? **Here's the real kicker.** We can take the same borders and flip them to create the opposite effect. Check it out: 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. 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): 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: 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`. **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!**