Launched in May 2003, CSS Zen Garden is a development resource for World Wide Web. The aim of the site is to showcase the possibilities of CSS-based web design. You will find the CSS Zen Garden at csszengarden.com.
In the CSS Zen Garden, graphic designers from all over the world contribute with their own style sheets to change the visual presentation of a single HTML file. The HTML markup never changes except for the reference to an external CSS file, so any visual change is the result of CSS and supporting imagery.
When the CSS Zen Garden was launched in 2003, it contained just five designs. Today (2011) there are over 200 different designs in the garden, but unfortunately the website is no longer updated frequently although it is still possible to submit designs. The CSS Zen Garden was formed by Canadian web designer Dave Shea. According to Shea, the garden was inspired by “Daily CSS Fun”, an online experiment carried out by Chris Casciano, and a CSS contest arranged by the web search engine HotBot.
Examples of designs that you can find in the CSS Zen Garden.
- The Original by Joachim Shotter
- Icicle Outback by Timo Virtanen
- Make ’em Proud by Michael McAghon and Scotty Reifsnyder
- Kyoto Forest by John Politowski
- A Walk in the Garden by Simon Van Hauwermeiren
- Orchid Beauty by Kevin Addison
- Oceanscape by Justin Gray
- CSS Co., Ltd. by Benjamin Klemm
- Sakura by Tatsuya Uchida
- Under the Sea! by Eric Stoltz
- Retro Theater by Eric Rogé
- Lily Pond by Rose Thorogood
- Withering Beauty by William Duffy
- Tiny Blue by Timo Virtanen
- Leggo My Ego by Jon Tan
- LuGoZee by Viallon Pierre-Antoine
- The Diary by Alexander Shabuniewicz
- Lonely Flower by Mitja Ribic
The text of the Zen Garden HTLM file has been translated into the following languages.
- Chinese (Traditional)
- Czech
- Danish
- Dutch
- French
- Finnish
- German
- Greek
- Hungarian
- Italian
- Indonesian
- Japanese
- Korean
- Norwegian
- Polish
- Portuguese
- Romanian
- Russian
- Spanish
- Swedish
- Turkish
Book
In 2005, the book “The Zen of CSS Design: Visual Enlightenment for the Web” by Dave Shea and web designer Molly Holzschlag was published by Peachpit Press.
The book features 36 designs from the CSS Zen Garden and a case study of each design lets you know more about how each designer came up with their work.
Who is Dave Shea?
Dave Shea is a Canadian web designer known primarily for his work in web-standard development. He is a member of the Web Standards Project (WaSP)* and runs a popular web designer blog at mezzoblue.com. Shea is also founder and creative director of Bright Creative in Vancouver, British Columbia.
Shea and his sites have won multiple awards, including ‘Best of Show 2004’ at the South by Southwest Interactive (SXSW) conference in Austin, Texas.
* The Web Standards Project (WaSP) is a project where professional web developers disseminate and encourage the use of the web standards recommended by the World Wide Web Consortium and certain other groups and standard bodies. The project campaigns for standards to reduce costs, decrease complexity and increase the accessibility and long-term viability of documents published on the web.