A web site that inspires me is CSS Zen Garden, “a demonstration of what can be accomplished visually through CSS-based design.” The best place to start exploring is from the Design List page (right), which provides a complete linked list of all the pages.
I find the site inspiring in a couple of ways. First, it’s a fantastic display of the power of Cascading Style Sheets. The site consists of hundreds of “pages,” but through some scripting sleight of hand, all of them are actually the same single XHTML page. While the content of every page is the same, each page has a completely unique design. A different style sheet is linked to each page to control the layout, style, and graphics.
Secondly, many of the designs are excellent and provide great ideas and inspiration. A wide variety of designs are on display, carefully crafted by hundreds of professional web designers.
One of my favorites is the page shown at left, which is entitled “Hop.” Purple is a favorite color of mine, and look at the gradients and the many drop shadows, which contribute to the 3-dimensional appearance. The photos of the dancers are gorgeous, and their hands, with shadows, seem to be touching the ceiling.
From a design perspective, the page is beautiful, but look under the hood at the code and you’ll find further inspiration. (Click the screen shot, then View Source to view the XHTML. Here’s the CSS.)
Like many forward-looking and cutting-edge sites today, CSS Zen Garden is constructed without any table tags, instead using CSS to position the elements on the page. And of course you won’t find any of those obsolete <font> tags (there’s absolutely no reason to use them any more, and good riddance. You can do so much more when you style type with CSS instead of font tags.)
In addition, the code is standards compliant—the XHTML and CSS are valid according to the standards set by the World Wide Web Consortium (the W3C). Largely because it’s standards compliant, the design renders very well in most (or perhaps all) modern browsers—a phrase which (at this point in time) generally means version 5 browsers and above (although IE 5 is fairly old and is one poorest “modern” browsers in terms of CSS-rendering capability).
When you’re looking for a variety of interesting designs, CSS Zen Garden is a great place to go.
