2.3 CSS禅意花园作品赏析（下）

一、谷香——食品主题设计

在禅意花园的作品中，还有一些是围绕某一个主题进行设计的。例如这里展示的057号作品就是以食品为主体的设计。它是由美国设计师Shaun Inman设计的。通过精致的食品照片，是不是能勾起访问者的食欲呢？

此外，这个设计中述设计了非常漂亮的弹出菜单．但是这个效果在Firefox中可以正常显示，而在IE 6和IE 7中都无法显示菜单的效果。

访同这个作晶的网址是http://www.csszengarden.com/?cssfile=057/057.css，设计师的个人网站是http://www.shauninman.com/。

二、城市——建筑主题设计

与上个案例类似，本案例围绕建筑这个主题进行设计，采用了建筑的不同透视角度，并组织在一个页面中，具有很强的空间感，它是由加拿大设计师Matt Kim和Nicole设计的。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=146/146.css。

三、“卡通版”禅意花园——特色效果

099号作品完全不使用通常网页采用的形式，而使用卡通连环画的表现形式，别具匠心。完整作品分为若干页。它由澳大利亚设计师Joseph Pearson设计的。

该作品的网址是http://www.csszengarden.com/?cssfile=099/099.css，设计帅的个人网站http://www.make-belicve.org

四、收音机——特色效果

059号作品的特色在于它不是采用常见的竖直延伸的布局方式，而采用横向分列，更有趣的是，在拖动浏览器下侧的滚动条时。页面上侧的指针全移动，就好像在为收音机调台一样，这个创意非常独特。该作品的网址是http://www.csszengarden.com/?cssfile=058/058.css。

它是由荷兰设计师Marc LA van den Heuvel设计的。设计师的个人网站是http://www.mlavdh.nl。

五、杀手风格——特色效果

这里展示的是一个非官方作品，这个作品初看上去风格有些另类，但是如果拖动一下浏览器的滚动条，就会发现它很有趣。lodidance.com

可以看，有一把刀把页面“切”开了一个豁口，当访问者拖动浏览器的滚动条继续向下浏览时，这把刀会把页两整个切开。这个创意令人叫绝！

需要注意的是，这个效果只有在Firefox和IE 7中可以正确显示，在IE 6中无效。

该作品的访问网址是http://adjustafresh.com/zen，由美国设计师Scott Kiekbusch设计，他的个人网站是http://www.adjustafresh.com。

六、海底世界——特色效果

这件作品在CSS Zen Garden近千件作品中，可以称得上是最“神奇”的作品。它表现了一个精致的海底世界，页面很长，浏览器窗口中只能显示很小的一部分。无论如何拖动浏览器的滚动条，页面中的“潜水员”都会在相同的地方，也就是说“潜水员”会在“海水中”上浮或下潜。页面上部的背景比较浅，这意味着在海面附近，越往下“海洋”的背景颜色就会越深，意味着潜水员在不断地下潜。最神奇的是，“潜水员”手中的探照灯竟然可以随着下潜的深度不断变亮。当浏览器页面滚动到海底时，会冒出气泡。坯有小螃蟹会跑出来。读者如果有兴趣，可以仔细研究一下这个作品。

需要注意，这个网页在FireFox中的效果最好，在IE 7中虽然可以看出探照灯的变化。但是由于这个页面使用了特殊技术，背景颜色显示不如在FireFox中自然。在IE 6中，没有任何效果。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css，由德国设计师Kai Laborenz设计，他的个人网站是http://www.css-praxis.de。

七、博物馆——特色设计

148号作品也是—个很有意思的设计，由比利时设计师Samuel Marin设计。他把整个页面设计为一个博物馆大楼的剖面图，可以看到很多楼层的藏品，而每一个藏品正好就是页面中的一项内容，这个构思非常巧妙。

访何这个作品的网址是http://www.csszengarden.com/?cssfile=148/148.css，设计师的个人网站是http://www.info.fundp.ac.be/~sma/。

八、剧院效果——特色效果

202号作品由法固设计师Eric Rage设计。作品的剧院效果非常有趣，当拖动浏览器的滚动条时，网页内容就像电影“银幕”上的文字一样向上滚动，极富创意，效果生动。

需要注意，这个效果只有在Firefox和IE 7中可以正确显示，在IE 6中无效。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=202/202.css，设计师的个人网站是http://space-sheeps.info。

本章小节

在本章中，读者可以欣赏到20多个非常精彩的“CSS禅意花园”网站中的作品。同一个HTML文件，仅仅通过不同的CSS设置，就产生了如此丰富多彩的页面效果，可见CSS对于网页设汁的重要性，因此它是网页设计师手中最得力的一个武器。在本教程后面的章节中，将深入CSS设计的方方面面，希望读者在学习完本教程以后，不但能够制作出本章介绍的这些页面效果，更可以设计和创造出更精彩的网页。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表