Fixing Your Backgrounds
Project 12
For all its power, HTML-based design has some severe limitations. A ufficiently clever (or desperate) designer can work around these limitations but generally at the expense of hideously complicated tables and a lot of sliced-up images. This has been the norm for years; indeed, best-selling design tools have been built around this need to easily slice up a single large image into many small pieces, all for the purpose of having a Web browser reassemble it into an apparent whole.
As we've seen in other projects, CSS can free us from the need for complex table structures and convoluted markup. So far, however, we've looked at ways to replace HTMLbased tricks with much less complicated CSS-based effects. Although these are certainly useful and can make the designer's life a lot simpler, it might occur to ask: Doesn't CSS offer anything new? Can it enable us to do anything that was truly impossible to achieve with HTML alone?
The answer to these questions is simple: Yes. Certainly, CSS does this in a myriad of small ways, like its capability to alter the spacing between letters or to change the style of a link that has a mouse pointer over it, but CSS also has some really spectacular tricks up its sleeve. Project 12 explores just one of them.
Designs
A select listing of pages that show new or striking ways of using the concepts presented in this project. Note that the designs aren't necessarily the result of reading the book, but are instead meant to show different ways of using the same basic ideas.
- css/edge
- In addition to containing the complexspiral demo that this project explains, the main page uses a variant of the idea: one background image that applies to more than one separated element.
- The Chessmill
- A nice use of a faded-out chessboard as filtered through varying elements. Note how the site's logo is part of the background, and yet never interferes with the content.
- Edna St. Vincent Millay
- Beautiful graphic work from John Merrill, and one of the designs that spurred the creation of "complexspiral distorted."
- The Annotated Mage: The Hero Discovered
- Not only the home page, but all the character pages use this technique to really make the design pop.
Errata
There are no known errata for this project.