On drop shadows and CSS

Christian Crumlish  

January 19, 2006

Related Topics

I’m still at a loss as to why such complicated tutorials exist for implementing drop shadows in CSS.

By implementing I don’t mean that CSS itself is used to create the dropshadow but rather that CSS is the tool used to display drop shadows on a page in an efficient manner (i.e. without the use of several images).

I tend to create dropshadows the very same way we did in the early ways with tables: top notch, right tile, bottom notch.

I implemented this very smoothly on the BoomBoomBap redesign and I don’t recall it being all that big of a deal.

Screenshot

Here’s the basic layout for a box with a shadow:

Code:

<div class="headerl">
<a href="javascript:void(0)">Newsletter</a>
</div>

<div class="menuleft">
Find out what's new as soon as it's added...
</div>

<div><img src="/images/obgb.gif" width="160" height="8" alt="" /></div>

CSS:

.headerl { background: url(images/obg2.gif) left top repeat; font-weight: bold; width: 155px; height: 26px; padding: 7px 0 5px 5px; color: #333366; }

.menuleft { padding: 10px; background: url(images/lrshade.gif) right top repeat-y; background-color: #FFE6CC; border-left: 1px solid; width: 139px; }

In this example (which has been stripped down from the live site):
header1 is the box title
menuleft is the content of the box

The header CSS has some basic styling – font weight, color and padding – but it also has an additional element in the form of a background image which contains the pretty top-right notch or beginning of the shadow.

The menuleft CSS also has basic styling and a background image – which tiles vertically.

At the end of the menu is a bottom image which closes the shadow nicely.

In the example image shown the first box is header1, the second is menuleft, and the bottom is obgb.gif. Some extra stuff was stripped from the CSS here for the icons and such but the concept is the same.