Case 6: CSS Zen Garden

In May 2003, when the number of CSS-aware browsers reached a critical mass, Dave Shea launced a Web site that challenged graphic artists to start taking CSS seriously. Dave, a Web designer from Vancouver, Canada, provided entrants with an HTML file as a starting point and asked people to write style sheets that would turn the text into visually stunning presentations. At the time of writing this (October 2004), he has received well over 500 sumbissions and has selected 100 or so that he showcases on the site. Figures 11.8 11.13 shows some of the designs.

Figure 11.8. "Brushwood" by Katrin Zieger.

Figure 11.9. "Invitation" by Brad Daily.

Figure 11.10. "Mediterranean" by John Whittet.

Figure 11.11. "Pleasant Day" by Kyle Jones.

Figure 11.12. "Skyroots" by Axel Hebenstreit.

Figure 11.13. "Switchon" by Michael Fasani.

You can find the CSS Zen Garden at http://www.csszengarden.com

There isn't room in this book to describe how all the designs are achived technically. (Reading this book, however, gives you the insights to understand what is going on in the various Zen style sheets.) We limit ourselves to explaining one of the tricks that is commonly used in the Zen style sheets. To understand how it works, we must first study the underlying HTML code. Here is a fragment:

 <div >   <h1><span>css Zen Garden</span></h1>   <h2><span>The Beauty of <acronym     title="Cascading Style Sheets">CSS</acronym>     Design</span></h2> </div> 

As you can see in this code, the two lines of text are wrapped in several levels of elements, both block-level (DIV, H1, H2) and inline (SPAN, ACRONYM). Most elements are structural and we easily understand at least after having read Chapter 1 what they mean. However, the SPAN elements look slightly out of place. Why are they there?

To understand why the SPAN elements are there, we need to look at the accompanying style sheet. Here is an excerpt from Dave Shea's sample style sheet, which describes the H1 element:

 #pageHeader h1 {   background: transparent url(h1.gif) no-repeat top left;   width: 219px;   height: 87px; } #pageHeader h1 span {   display:none } 

The first declaration block sets properties on the H1 element itself. The element is given a background image and a size. The second declaration block, which describes SPAN, has an element of surprise in it: display: none! This means that the element is not displayed. Why would you not want to display the SPAN element? The answer is that the designer wants you to see the background image of the H1 element, but not the textual content of the element. The SPAN element is there so that the text can be safely removed. If display: none had been put on the H1 element, the background image would not have been visible at all. Background images are an important part of the Zen garden.

The next question becomes if most of what we see in the Zen garden is images, why doesn't the designer use the IMG element instead of the background property? This question is important and has two answers. First, by using elements such as H1 and H2, the document retains information about the meaning of the text, not only its presentation. Second, by attaching the images to the style sheets, the browser can safely assume that the document can be displayed without the images. For example, a mobile device with scarce bandwith may ignore the style sheet altogether, but the document can still be shown to the user. Figure 11.14 shows what the HTML document looks like without any styling from author style sheets.

Figure 11.14. The Zen HTML document shown without any author style sheet. The presentation is plain, but the document's structure remains.

All the style sheets on display in the CSS Zen Garden are released under the Creative Commons license. This means that you can study them and reuse the code as long as you give credit to the original author, do not use it for commercial purposes, and release any derivative works under the same license.

You can find more information about the license from http://creativecommons.org