返回正常中文阅读
想对这篇译文“指手画脚”吗?
大错
小错
不顺
建议 css Zen Garden: The Beauty in CSS Design
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.
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.
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 mediatemple. Now available: Zen Garden, the book.
CSS禅意花园:CSS设计之美
开悟之路
各家浏览器的专属标签、低兼容性的DOM,或者是缺乏完整支持的CSS等遗迹,如今都散落在暗黑而荒凉的道路上。
今日,我们必须扫除脑海里的过时技巧。感谢W3C、WaSP,以及浏览器作者们的努力不懈,我们终于能达到网站设计技术的开悟境界。
css Zen Garden「CSS禅意花园」邀请您放松身心,冥想专家们的重要课题。让我们以清晰的心灵之眼凝视,并且用崭新、充满活力的方式学习。
这项受人尊敬的古老技术,达到天人合一的境界。
这是关于什么?
显然平面设计师有必要认真看待CSS。 Zen Garden致力于推广使用、启发灵感和鼓励参与。你可以从浏览列表里的设计着手。只要选择列表上的任一样式表,就可以将它载入到这个页面。 HTML程式码都维持原状,唯一改变的是使用的CSS档案。没错,的确如此。
CSS 具备完整控制超文字文件的能力。不过唯有当你把缰绳交给能从结构中创造美感的人们,用实例展示它的功能时,才能够鼓舞人心。截至目前为止,网站结构设计师和程式员已经介绍过许多关于良好技巧与骇客手法的范例。平面设计师则还没有在这个领域建立名声。是需要改变的时候了。
参与我们只邀请平面设计师参与这项计划。你必须修改这个页面,所以得要有良好的CSS技巧。不过这份范例档案已经详尽地加上注解,即使是CSS初学者也能够以此为出发点。请参考CSS资源手册,里面有相关的进阶教学与技巧说明。
你可以用你希望的任何方式修改样式表,但是别更动HTML档案。如果你从来都没有这样做过,也许会有点心生胆怯。不过你可以参考列表来深入地学习,并且拿范例档案作为教学指南。
请下载html跟css的范例档案,并且在自己的电脑上修改。在你完成你的杰作后(请别拿半成品投稿),先将CSS档案上传到你的网页服务器,再把档案的网址寄给我们。如果我们采用你的作品,就会自行下载相关图片。最后成品会放在我们的服务器上。
最新消息:我正在寻找翻译工作者。如果你擅长英语以及其他语言,这也是一种参与这项专案的方式。欲知详情请与我连络。现有的翻译文件都可以自由取得。
益处
你为什么要参与这项计划呢?因为可以展现你的实力、激发创作灵感,并且在设计以CSS为基础的案例时,这项计划可以当作参考用的资源。即使在今日这也是极为需要的。越来越多主流站台开始拥抱这项技术,但还是不够。虽然现在还不成气候,但总有一天这个展览场地会成为历史的宝藏。
必要条件
我们希望你尽可能地使用CSS1。 CSS2则只可以使用已被广泛支援的部分。 css Zen Garden采用的是可行、实用的CSS语法,而不是些只能被2%观众浏览的超尖端技术。实际上,我们唯一的需求就只是你的CSS要合乎标准。
不幸的是,这样的设计方式会强调各种CSS实作平台上的缺陷。即使是完全合乎标准的CSS语法,不同浏览器也会有不同的表现方式。而当你修好一边,却又让另一边出状况的时候,那可真是让人抓狂。请参考资源手册里关于一些错误修正的资讯。完整的浏览器支援仍然是不切实际的梦想,我们也不想要你用精准地指定像素的程式码来跨所有平台。不过还是请你尽可能地作测试。如果你的设计没办法在IE5+/Win与Mozilla上正常显示(超过90%以上的人们使用),我们不可能接受它。
我们要求你提出原创作品。请遵守著作权法规。请尽可能不要使用有争议的素材;我们可以接受高雅的裸体素材,但是拒绝不当的色情图样。
这是个示范,也是学习用的练习题。你可以保留图片的完整著作权,但我们要求你用与本网站相同的Creative Commons license释出你的CSS作品,让其他人可以从中学习。
带宽由mediatemple提供。
