Painting the Web

Web Pages Are Like Ogres, and Ogres Have Layers

A typical web page five years ago was created with one big HTML table to manage the layout. Now, a typical web page could consist of one div element containing the main content (centered or not), and then multiple div elements split into columns, set side by side. It's an effective design strategy but neglects one important aspect of page design: that a web page has depth in addition to height and width.

HTML elements can be nested, of course, but the nesting can also be a part of site design, as well as the site's functionality. In particular, div elements lend themselves to creative nesting.

Only the Shadow Knows

OK, corny title. However, one of the more common effects created with nested div elements is to provide shadows, frames, or other overlapping effects. Only one background image can be used with each HTML element, but by being able to layer elements and making use of image transparency, we can add rounded corners, as well as add shadows to content areas.

Though web design trends constantly change, a popular page layout is to center content in the page, with a shadow around the content. An additional design element can also consist of rounded corners, but we'll focus just on adding shadows around a centered, sized content area.

There are a dozen ways to create the shadowed content, but in this how-to we'll use Photoshop and Photoshop's own drop-shadow capability. The same how-to can be adapted to other tools.

First, create a background ...