5個實用的CSS3實例

對於設計人員和開發人員來講，CSS一直是web設計過程當中重要的一部分，隨着CSS3的出現以及愈來愈多的瀏覽器對它的支持，設計師們有了 更多的選擇。用純CSS也能夠實現各類各樣很酷的效果了，甚至是動畫。雖然有些效果不能跨瀏覽器（甚至是支持CSS3的瀏覽器）運行，有些只是展現並沒什 麼實際 用途， 但僅用CSS實現出的這些效果彷佛沒什麼能夠挑剔的。

這裏有5個使用CSS3實現的常見效果，你能夠立刻動手試試看。

1. CSS3按鈕

你能夠建立一些大小、顏色不一樣的元素（如按鈕）,而不用每次都準備一個背景圖片。 ZURB上有教你建立CSS3按鈕 的詳細文章，有興趣能夠去看看。利用RGBA作出的陰影效果然的很棒！

2.CSS3柱形圖

Ben Lister選列了不少實用的CSS3技巧，包括這個看起來至關不錯 的3D柱形圖 。使用-webkit-transform或-moz-transform以及指定的偏移，你能夠用CSS作出和圖片同樣使人印象 深 刻的效果。

3. CSS3下拉菜單

WebDesignerWall的Nick La展現瞭如何建立一個漂亮的CSS3彈出式下拉菜單 ，他展現了使用漸變圖片和CSS建立的兩個版本的菜單。

4. CSS3引用氣泡

這些由Nicolas Gallagher建立的純CSS引用氣泡看起來很棒，你能夠稍加修改做爲你網頁上的blockquote元素。

能夠去Gallagher的demo頁 面看看效果，尤爲注意那個twitter的氣泡，比twitter官方使用嵌入的方法好。

5. CSS3相冊

蘋果剛剛推出了一些展現HTML5網頁效果的頁面 （HTML5和CSS3每每被聯繫在一塊兒）。雖然這個使用CSS3建立的 Polaroid-style相冊有些過渡和3D效果沒法在全部的瀏覽器中運行，不過這真的是一個很酷的CSS3過渡效果的示例。