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过渡效果的示例。