In contrast to the original version, published yesterday, here is the outline mark up for the box with the drop shadow:

<div class="sbxouter"><div class="sbxinner"><div class="sbxheading"><h2>Heading Here</h2></div><!-- .sbxheading -->... rest of content ...</div><!-- .sbxinner --></div><!-- .sbxouter -->

The “cost” of the effect in HTML terms is two more div containers per section. Note that I habitually add a comment at the end of any div that stretches over more than one line to show what .class or #id defines its style, making it much easier to check that everything opened gets properly closed.

To some extent, the sbxheading class is redundant but I wanted to be specific in order to avoid the problem of including blocks of content that feature their own h2 tags (it is a dynamically generated page and so externally provided content could break my neatly organised hierarchy). Including this mark up also let me draw the line underneath the heading across the whole width of the box, which I think is another visual improvement over the previous version.

Watch for the final exciting episode, when I get down to the CSS that puts flesh on these bones!

Tags: css, drop shadow, web design