CSS Zen Garden: The Beauty of CSS Design
CSS Zen Garden: The Beauty of CSS Design
CSS Zen Garden：CSS 设计之美
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file. 这是一个展示基于 CSS 设计所能实现效果的演示项目。从列表中选择任何样式表，即可将其加载到当前页面。你可以下载示例 HTML 文件和 CSS 文件。
The Road to Enlightenment: Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. 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 time-honored techniques in new and invigorating fashion. Become one with the web. 启蒙之路：在黑暗而沉闷的道路上，散落着过去那些特定浏览器的标签、不兼容的 DOM、破碎的 CSS 支持以及被遗弃的浏览器等遗迹。我们必须清空对过去的执念。多亏了 W3C、WaSP 以及各大浏览器厂商等人士的不懈努力，Web 启蒙已经实现。CSS Zen Garden 邀请你放松身心，参悟大师们的重要课程。开始清晰地观察，学习以崭新且充满活力的方式运用那些久经考验的技术，与 Web 合而为一。
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. 这是关于什么的？人们始终需要见证 CSS 的力量。Zen Garden 旨在激发兴趣、提供灵感并鼓励参与。首先，查看列表中现有的设计。点击其中任何一个，都会将该样式表加载到当前页面。HTML 保持不变，唯一改变的就是外部 CSS 文件。没错，就是这样。CSS 允许对超文本文档的样式进行完全且彻底的控制。要让人们为此感到兴奋，唯一的方法就是展示当结构被赋予那些能够创造美感的人手中时，它究竟能达到何种境界。设计师和程序员们共同为 Web 的美感做出了贡献；我们总能让它更进一步。
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. 参与方式：强大的视觉设计一直是我们的核心。由于你需要修改此页面，因此扎实的 CSS 技能是必要的，但示例文件中的注释非常详尽，即使是 CSS 初学者也可以将其作为起点。请参阅“CSS 资源指南”以获取高级教程和 CSS 使用技巧。你可以随意修改样式表，但不得修改 HTML。如果你从未以这种方式工作过，起初可能会感到畏惧，但请跟随列出的链接深入了解，并以示例文件作为参考。下载示例 HTML 和 CSS，在本地进行创作。一旦完成了你的杰作（请不要提交半成品），请将你的 CSS 文件上传到你控制的 Web 服务器上。将该文件及其所有相关资源的归档链接发送给我们，如果我们决定采用，我们会将其下载并放置在我们的服务器上。
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. 益处：为什么要参与？为了获得认可、获取灵感，并建立一个我们都能参考的资源库，向人们展示 CSS 究竟有多么神奇。本网站既是当今 Web 从业者的灵感源泉，也是未来从业者的学习工具，同时也是我们共同期待的未来技术的展示画廊。
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. 要求：在可能的情况下，我们希望主要使用 CSS 1 和 2。CSS 3 和 4 应仅限于广泛支持的元素，或者必须提供强大的回退方案。CSS Zen Garden 关注的是功能性、实用性的 CSS，而不是仅有 2% 的用户能看到的最新前沿技巧。我们唯一的硬性要求是你的 CSS 必须通过验证。幸运的是，以这种方式进行设计，正好展示了目前各种浏览器对 CSS 的实现程度。遵循这些准则，你应该能在大多数现代浏览器中看到相当一致的效果。由于当今 Web 上的用户代理数量庞大——尤其是考虑到移动端时——在每个平台上实现像素级完美的布局可能并不现实。这没关系，但请尽可能多地进行测试。你的设计至少应在 IE9+ 以及最新的 Chrome、Firefox、iOS 和 Android 浏览器（覆盖超过 90% 的用户群体）中正常运行。我们要求你提交原创作品。请尊重版权法。请尽量减少令人反感的内容，并尝试在作品中融入独特且有趣的视觉主题。我们已经不需要更多与“花园”相关的主题设计了。这既是一次学习练习，也是一次演示。你保留图形的完整版权（有有限的例外情况，请参阅提交指南），但我们要求你根据与本网站相同的知识共享（Creative Commons）许可协议发布你的 CSS，以便他人能从你的作品中学习。
By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book. 作者：Dave Shea。带宽由 mediatemple 慷慨赞助。现已推出：《Zen Garden》一书。