Last week, I was playing around with the appearance of the Intranet at work, trying to introduce a drop shadow effect without making the HTML or CSS involved in building the pages significantly more complicated. Here are the before and after shots:

The effect is deliberately subtle – hardly enough to see but just enough to persuade the brain that there is a small drop shadow round the box. The starting point is the mark up for the original box, shown on the left:

<div class="infobox"><h2>Heading here</h2>... rest of content ...</div><!-- .infobox -->

It uses a level two heading because each box on the page is the start of a new subsection of content. In the next episode, I’ll publish the HTML for the new style box, which is only slightly longer.

Tags: css, drop shadow, web design