Sneaking Out of the Box
Project 10
Project files
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.
Designs
A select listing of pages that show new or striking ways of using the concepts presented in this project.
- curvelicious
- The original css/edge demo, and the genesis for much of this project. Explains the basic technique in some detail, although the book has more detail.
- 9-11 Emergency Relief
- The firefighter graphic in the top left corner uses the floated-slices approach to make the page more seamless. Strong, simple design.
- Flaky Apple Pie Recipe
- Not only does this page use the floated-slice approach to wrap text around some rounded areas, but it has a great recipe for apple pie. What's not to like?
Errata
- Page 215
-
In the second code block on the page,
text-align: justifyshould 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;}