Adding some depth to your webpage

Posted on 15th Mar 2012

Although these techniques are subtle (which arguably is a good thing so those browsers without support don't look hugely different), they do provide a significant 'lift' to a page giving a greater sense of depth.

1. Subtle borders and horizontal rules

This is probably the technique I use most often to add a bit of punch to a page. Really easy to conjure up and provides that little emboss effect.

For this to work you will need to be working with a background that isn't white.

border-bottom: 1px solid #E3E3E3;
box-shadow: 0 1px 0 #FCFCFC;

To get this playing nicely in as many browsers as possible we can add in all the vendor prefix versions of box-shadow too, so our final code would be.

border-bottom: 1px solid #E3E3E3;
-webkit-box-shadow: 0px 1px 0 #FCFCFC;
-moz-box-shadow: 0px 1px 0 #FCFCFC;
box-shadow: 0px 1px 0 #FCFCFC;

This will work in almost all browsers except IE8 and below.

2. Embossed text

A similar technique to the one above, the idea here is that we give the text a 1px solid shadow that is both lighter than the text colour and lighter than the background colour so it is still visible.

The text-shadow property has been around for ages, but because of a slow uptake into Internet Explorer this still isn't going to work until the release of IE10. But no biggie they still get perfectly legible text, just without the extra pazzaz.

text-shadow: 0px 1px 0px #fcfcfc;
color: #333;