弹性禅意花园
2003年12月7日星期日 (下午4:38 GMT)
弹性庭院是伟大 CSS Zen Garden 的一个新成员，由我自己设计。
该设计使用 em 作为单位，而不是像素，来定义文本大小和布局尺寸。其结果是一个弹性的设计，它会根据用户的文本大小设置进行扩展和收缩。
这种“弹性”方法我使用了一段时间。认为文本大小应该是相对的（即使用 em 而不是像素）以提高可访问性的论点，可以延伸到文本所在的区域的尺寸。对我来说，具有随文本成比例增长的布局是有好处的，这是说得通的——我的意思是，如果视力不佳的用户发现更容易阅读大字体，那么当内容块之间的空间也更大时，他们也会发现文本更容易管理，对吗？它还避免了文本大小增加导致预期设计被挤出甚至可能损坏（例如，尝试放大其他 Zen Garden 设计中的文本）。我将在稍后更详细地讨论弹性问题。
然而，“弹性庭院”旨在更多地作为一种概念的有趣演示，而不是可访问性/可用性演示。这并非我通常的设计方法——有些东西，比如图形子标题、可能具有更高对比度背景的前景以及带有图案背景的文本，会降低可用性，但 Zen Garden 的重点是演示 CSS 的图形设计能力。这个特定的设计希望证明 em 是一个可行的选择，即使对于复杂的布局。
您可以通过查看带注释的 CSS 文件，了解该设计的某些方面是如何工作的。
评论
评论3
我们已经使我们的一家网站完全可伸缩： http://www.imapa.de/ 。
但我知道，在使用 800x600px 屏幕尺寸的用户增加文本大小时，他们必须水平滚动，而在德国，近 80% 的用户使用 1024x768 或更高的屏幕分辨率。在此基础上，我们的决定很容易做出。
Cornelia Lange 于 2003 年 12 月 9 日星期二上午 6:29 GMT 说道。
评论5
呵呵。好吧……
其实很简单。有一个静态的点状下划线图片作为所有链接的背景。当鼠标悬停时，背景图片会切换到一个 GIF 动画。
迪斯科。
Patrick 于 2004 年 1 月 9 日星期五晚上 9:30 GMT 说道。
评论6
你好！
我也在我的网站上使用了弹性设计（我称之为“可缩放”），并且包含了一个小小的 JavaScript，可以改变字体大小，从而产生“放大/缩小”的效果。您可以在这里看到：
我知道这个设计可能有点粗糙，因为我刚刚删除了 CMS（我使用的是 AWF）自带的原始设计中的所有表格，但如果您不介意评论，我将非常感激。
此致，
Ivaylo
Ivaylo 于 2004 年 2 月 20 日星期五上午 7:20 GMT 说道。
评论8
非常酷！
CSS Zen Garden 很棒。实际上，当我编写 Elxion CMS Designer 的前端时，它受到了 CSSZenGarden 的启发。当我看到 CSS 所能做到的事情时，我决定为 CSS 设计师制作 CMS……
elixon
评论9
所有这些 CSS Zen* 的东西都太酷了，以至于我可能应该把 Elixon CMS 改名为 CSSZenCMS？:-) http://demo.webdevelopers.cz
elixon
评论10
我为 csszengarden.com 完成了一个设计主题，项目让我非常兴奋。
您可以在这里查看： http://www.celebrityblog.net/zengarden/zengarden-sample.htm
Jane Jolin 于 2005 年 8 月 4 日星期四晚上 9:00 GMT 说道。
评论1
不错。我也喜欢那些动画链接。
John Pepper 于 2003 年 12 月 8 日星期一上午 10:19 GMT 说道。