-
-

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. -

-
- - -