Eric Meyer

on CSS

cover image
Available now!

Sneaking Out of the Box

Project 10

preview image 1 preview image 2 preview image 3
Project files
Project 10 ZIP file Project 10 StuffIt file

The history of web design to date has been one of overcoming confinement. When you get right down to it, the tools we've been given to accomplish compelling design are woefully limited because HTML elements generate nothing but rectangular boxes. Headings, paragraphs, and even lists are all a series of boxes at their core.

The granddaddy of all boxiness is the table, of course. We've spent years taking an inherently gridlike structure and doing our utmost to bend it into something less rigid. How many designers have taken an image and split it up into two, three, or more pieces just so that it can straddle some cell divisions and provide the illusion that the page isn't composed of a series of boxes? How many of us have wished that, just once, we could have a table cell with a rounded corner?

In Project 10, the reader is shown two techniques for creating non-rectangular design elements, one involving straight diagonal lines and the other curves. Both techniques rely on nothing more exotic than regular HTML elements and some clever CSS.


A select listing of pages that show new or striking ways of using the concepts presented in this project.


Page 215
In the second code block on the page, text-align: justify should not appear. It is first introduced on page 232.
Page 231
The first code block on the page should read:
div#p1end {text-align: right; margin: 0; padding: 0; clear: both;
  background: #FDF url(p1botleft.gif) bottom left no-repeat;}