running words around
design education and visual communication
authored by chris m hughes

Designing for CSS Zen Garden

Sunday, 23 November 2008

CSS has fundamentally changed web design during the past few years or so by separating style from structure. It has moved the emphasis onto design rather than development in the search for standards-compliant and inventive visual websites, and CSS3 has set a new benchmark for flexiblity and creativity.

A key player in this development has been the CSS Zen Garden website, which is now 10 years old and, although still online and available as a great resource, is no longer operating per se.

In my teaching I regularly use the CSS Zen Garden by presenting students with a css-free html document on a given article, and request that they develop a stylesheet on a given theme, and create a unique design. The real beauty of this exercise lies in the fact that everyone starts off with the same basic file. Its a little bit like sculpture - everyone starts off with the same rock and then carves out their own visual idea.

So it made perfect sense to practice what I preached by creating my own design for the Zen Garden, whilst issuing the students the same task. I decided to capture a typical urban moment - a jet flying high overhead, carrying people to who knows where, and framed by soaring neon-lit office buildings.

And here it is:


Some notes:
In this design, the key visual problem was how to combine two background images so that the full browser width could be used. The righthand image moves fluidly with the browser, but the content remains fixed, flanked by the lefthand building image. To accomplish this, the image on the left is set into the body of the page like so -

body {
background-image: url(visuals/visualleft.jpg);
background-repeat: no-repeat;
background-position: left top;

The righthand image is then put into the background of the container, which is set to 100% width -

#container {
width: 100%;
position: relative;
height: 1300px;
background-position:right top;
background-image: url(visuals/visualright.jpg);

This allows the container to use the full width of the screen. The text content is then set a fixed distance away from the lefthand side of the browser. Finally, a separate div sits under the container, to cut off the buildings and create the lower area that houses the footer content.

View the site and its css.