A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file and css file

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

很多时候,中文的Web设计仍然扮演着追赶者的角色,主流是以英语为代表的西方语言下的设计。语言是文化的重要方面,其差异——尤其是方块文字与西方字母文字的差异——强烈地影响了Web设计的效果,这其中或又以排版(typography)为甚。我们的Web设计师们醉心于那些优秀的西方设计,惊喜之余照搬或临摹,用作中文网站的设计,效果却可能差之甚远。一些跨国公司设计自己的中文网站时,几乎是将英文网站的样式表原封不动地套用到中文内容,不但整体效果失了原味,细节不当之处更不胜枚举。

微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处,反而增加了麻烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔,但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧?即便使用鼠标滚轮改变字号大小并不费劲,却并没有太多用户意识到这一点。

通常情况下,中文字体和英文字体的重要区别,在于英文字体不包含对中文字体的定义,而中文字体却往往包含了对英文字体的定义(仅需要为英文大小写字母、数字及常用符号进行设计)。

也就是说,对一段包含中文的文字应用英文字体,中文会表现为默认中文字体(如Windows XP等系统下为宋体),而对英文应用中文字体,这些英文的字体将由中文字体决定。

从一开始,本文就没有停止过对中英文排版思路与方法的比较。优秀的英文Web设计远远多于中文设计,对Web设计的研究与讨论主要集中在英语世界,连CSS属性也是以英文等字母语言为设计对象的,这些都是实情。差异无处不在,除了字体和字号,中文Web排版还包括很多不容忽视的原则与技巧。

    h1, h2, h3, h4, h5, h6 { font-size: 100%; }
    address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
    small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

诸如此类的问题还有很多,但我不愿也不能列举所有。撰写本文的目的是引起大家对面向中文Web的排版设计的关注,要求仅仅是把其中的基本问题阐释清楚,并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究——哪怕只是零散地思考——这个问题。或许,重要的不是世界的改变本身,而是存在改变世界的人。

So What is This About?

There is clearly a need for CSS to be taken seriously by graphic artists. 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 code 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. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Participation

Graphic artists only please. You are modifying this page, so strong CSS skills are necessary, 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 file and css file 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 the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.

Benefits

Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.

Requirements

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. 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.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.

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.

Bandwidth graciously donated by DreamFire Studios