2.3 CSS禪意花園作品賞析（下）

標籤：style   class   blog   http   tar   ext   

一、穀香——食品主題設計 在禪意花園的作品中，還有一些是圍繞某一個主題進行設計的。例如這裡展示的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。 注意：該CSS檔案不知道什麼原因被作者刪除，具體效果請參看： 七、博物館——特色設計 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教程布局之道》教程列表

編輯：網頁學習網

本文地址:http://www.lodidance.com/css/jc/663.html