css.zen.garden,CSS Zen Garden

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.