Here is the accompanying CSS:

/* Shadow box definitions */div.sbxouter {background-color: #eee;border: 1px solid #eef;border-style: none solid solid none;padding: 0 2px 2px 0;margin-bottom: 0.4em;}div.sbxinner {border: 1px solid #9cf;border-top: none;background-color: #fff;line-height: 1.2;padding-bottom: 0.3em;clear: both;}div.sbxheading {padding: 0;margin-top: 0;background-image: url("./images/infobox_background.png");background-position: top;background-repeat: repeat-x;border-bottom: 2px solid #9cf;}div.sbxheading h2 {margin-top: -1px;font-size: 1.2em;padding: 0.4em 0 0.2em;}

The important trick is to take an outer box – very light grey, with an even lighter 1px border on the right and bottom sides – then use a small amount of padding to let those edges show underneath the main box. As mentioned above, it is the subtlety of the effect (very light colours and thin lines) that allows the illusion to work. If you want a bolder drop shadow effect, I think you’d need to work some graphics into the design as the straight lines will become more obvious.

Please feel welcome to use and adapt this approach if you’re after a subtle effect that can be applied with minimal effort (drop me an email if you publish the page somewhere I can have a look at it).

Tags: css, drop shadow, web design