Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Fancy CSS Box

Last Update: 5.7.2008

Here, I will demonstrate using XHTML, CSS and a few background images to create an appealing content box that will expand or contract to contain largely varied lengths of text. The XHTML and CSS used to create this expandable box is semantic and accessible; and the CSS is easily updated for re-styling. This technique will work for many common uses of background images to style elements: curved corner boxes, "Web 2.0" boxes, or drop shadow effects.


Demonstration

Here our example fancy box - it's got curved corners, a drop shadow, and even a small inner gradient near the bottom. This content box is semantic, accessible, and search engine friendly. It's composed of an H1, two Ps and a couple of divs.

A Goomba's Christmas Wish:

I know what you want. Don't even think about jumping on my head. It's the same thing, day in and day out. I'm just walking down the street, and BOP!, some darn plumber jumps on my head.

I want one of those spikey helmets; just like Cousin Goomfry. That'll teach those head jumping plumbers.

Use your browser's View menu to increase and decrease the font size. (Or use the Web Developer Toolbar to add or remove content.) Notice that the box is expandable to contain small or large amounts of content without breakage! (At least until you get to a ridiculously large size.) You can also disable images, CSS or JavaScript to see how the content will be visible in these situations. Note how both the main content box, and the title, expand to contain the content.


The Code

Here is the XHTML for those pieces.

<div class="box1">
  <h1>A Goomba's Christmas Wish: </h1>
  <div class="hook1">
  <p>I know what you want.  Don't even think about it...</p>
  <p>I want one of those spikey helmets.  </p>
  </div>
</div>

And here are the important parts of the CSS:

<style type="text/css">
.box1 {
  width: 291px;
  background: url(bottom.gif) #FFFFFF no-repeat bottom left;
  margin: 0 auto;
  padding-bottom: 6px;
}

.box1 .hook1 {
  background: url(middle.gif) no-repeat top left;
  padding-top: 8px;
}

.box1 h1 {
  background: url(top.gif) no-repeat top left;
  min-height: 38px;
  margin: 0;
  padding: 10px 80px 3px 15px;
}
</style>

When you use this technique on your own, pay special attention to the padding values. Make the padding just large enough to push your text inside the appropriate area of the background images. The background images used for this technique should have vertically repeating pixel rows for the majority of their height. Otherwise there will be a visible "seam" where the images connect.


Credits

This technique originates from Bulletproof Web Design by Dan Cedarholm — now in its second edition. It's very similar to the Sliding Doors technique for advanced styling. Mr. Goomba appears courtesy of the good folks at IconBuffet.com. The "Web 2.0" Photoshop techniques used to create the images for the content box used here originate from AbTuts.com.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me