A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to + load it into this page.
+ +
+
+
+ So What is This About?
+There is a continuing need to show the power of CSS. The + Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing + designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed + is the external CSS file. Yes, really.
+CSS allows complete and total control over the style of a + hypertext document. The only way this can be illustrated in a way that gets people excited is by + demonstrating what it can truly be, once the reins are placed in the hands of those able to create + beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can + always push it further.
+
+
+
+ Participation
+Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are + commented well enough that even CSS novices can use them + as starting points. Please see the CSS + Resource Guide for advanced tutorials and tips on working with CSS.
+You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve + never worked this way before, but follow the listed links to learn more, and use the sample files as + a guide.
+Download the sample HTML and CSS to + work on a copy locally. Once you have completed your masterpiece (and please, don’t submit + half-finished work) upload your CSS file to a web server + under your control. Send us a link to an archive of that + file and all associated assets, and if we choose to use it we will download it and place it on our + server.
+
+
+
+ Benefits
+Why participate? For recognition, inspiration, and a resource we can all refer to showing people how + amazing CSS really can be. This site serves as equal + parts inspiration for those working on the web today, learning tool for those who will be tomorrow, + and gallery of future techniques we can all look forward to.
+
+
+
+
+
+ Requirements
+Where possible, we would like to see mostly CSS + 1 & 2 usage. CSS 3 & + 4 should be limited to widely-supported elements only, or strong fallbacks should be + provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% + of the browsing public. The only real requirement we have is that your CSS validates.
+Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see + fairly consistent results across most modern browsers. Due to the sheer number of user agents on the + web these days — especially when you factor in mobile — pixel-perfect layouts may not be + possible across every platform. That’s okay, but do test in as many as you can. Your design + should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over + 90% of the population).
+We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable + material to a minimum, and try to incorporate unique and interesting visual themes to your work. + We’re well past the point of needing another garden-related design.
+This is a learning exercise as well as a demonstration. You retain full copyright on your graphics + (with limited exceptions, see submission guidelines), but we + ask you release your CSS under a Creative Commons + license identical to the one on this site so that others may learn + from your work.
+By Dave Shea. Bandwidth graciously donated + by mediatemple. Now available: Zen Garden, the book. +
+