5个实用的CSS3实例
2012-01-05 17:43
225 查看
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择。
![](http://www.sky84.cn/imgsky84/2010/06/06/css3.jpg)
用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。
更新:已提供CSS3按钮、CSS3柱形图、CSS3下拉菜单、CSS3对话气泡实例源代码。
这里有5个使用CSS3实现的常见效果,你可以马上动手试试看。
![](http://www.sky84.cn/imgsky84/2010/06/06/zurb-css3-buttons.jpg)
你可以创建一些大小、颜色不同的元素(如按钮),而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章,有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒!
查看 | 下载源代码
![](http://www.sky84.cn/imgsky84/2010/06/06/css3-graphs.jpg)
Ben Lister选列了很多实用的CSS3技巧,包括这个看起来相当不错的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移,你可以用CSS做出和图片一样令人印象深刻的效果。
查看 | 下载源代码
![](http://www.sky84.cn/imgsky84/2010/06/06/css-gradient-dropdown-menu-1.jpg)
WebDesignerWall的Nick La展示了如何创建一个漂亮的CSS3弹出式下拉菜单,他展示了使用渐变图片和CSS创建的两个版本的菜单。
查看 | 下载源代码
![](http://www.sky84.cn/imgsky84/2010/06/06/basic-css-speech-bubbles.jpg)
这些由Nicolas Gallagher创建的纯CSS引用气泡看起来很棒,你可以稍加修改作为你网页上的blockquote元素。
可以去Gallagher的demo页面看看效果,尤其注意那个twitter的气泡,比twitter官方使用嵌入的方法好。
查看 | 下载源代码
![](http://www.sky84.cn/imgsky84/2010/06/06/css3-photo-gallery.jpg)
苹果刚刚推出了一些展示HTML5网页效果的页面(HTML5和CSS3往往被联系在一起)。虽然这个使用CSS3创建的Polaroid-style相册有些过渡和3D效果无法在所有的浏览器中运行,不过这真的是一个很酷的CSS3过渡效果的示例。
想看更多CSS3和HTML5的demo,请点击这里(需翻墙,原因不详)。
英文来源:mashable | 译者 程序猿
本文链接地址:http://www.sky84.cn/index.php/article_content_id,371.html
![](http://www.sky84.cn/imgsky84/2010/06/06/css3.jpg)
用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。
更新:已提供CSS3按钮、CSS3柱形图、CSS3下拉菜单、CSS3对话气泡实例源代码。
这里有5个使用CSS3实现的常见效果,你可以马上动手试试看。
1. CSS3按钮
![](http://www.sky84.cn/imgsky84/2010/06/06/zurb-css3-buttons.jpg)
你可以创建一些大小、颜色不同的元素(如按钮),而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章,有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒!
查看 | 下载源代码
2.CSS3柱形图
![](http://www.sky84.cn/imgsky84/2010/06/06/css3-graphs.jpg)
Ben Lister选列了很多实用的CSS3技巧,包括这个看起来相当不错的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移,你可以用CSS做出和图片一样令人印象深刻的效果。
查看 | 下载源代码
3. CSS3下拉菜单
![](http://www.sky84.cn/imgsky84/2010/06/06/css-gradient-dropdown-menu-1.jpg)
WebDesignerWall的Nick La展示了如何创建一个漂亮的CSS3弹出式下拉菜单,他展示了使用渐变图片和CSS创建的两个版本的菜单。
查看 | 下载源代码
4. CSS3引用气泡
![](http://www.sky84.cn/imgsky84/2010/06/06/basic-css-speech-bubbles.jpg)
这些由Nicolas Gallagher创建的纯CSS引用气泡看起来很棒,你可以稍加修改作为你网页上的blockquote元素。
可以去Gallagher的demo页面看看效果,尤其注意那个twitter的气泡,比twitter官方使用嵌入的方法好。
查看 | 下载源代码
5. CSS3相册
![](http://www.sky84.cn/imgsky84/2010/06/06/css3-photo-gallery.jpg)
苹果刚刚推出了一些展示HTML5网页效果的页面(HTML5和CSS3往往被联系在一起)。虽然这个使用CSS3创建的Polaroid-style相册有些过渡和3D效果无法在所有的浏览器中运行,不过这真的是一个很酷的CSS3过渡效果的示例。
想看更多CSS3和HTML5的demo,请点击这里(需翻墙,原因不详)。
英文来源:mashable | 译者 程序猿
本文链接地址:http://www.sky84.cn/index.php/article_content_id,371.html
相关文章推荐
- 收藏-5个实用的CSS3实例
- 5个实用的CSS3实例
- 5个实用的CSS3实例
- 5个实用的CSS3实例
- 5个实用的CSS3实例
- 5个实用的CSS3实例
- 5个实用的CSS3实例
- 20个实用便捷的CSS3工具、库及实例
- CSS3 简单又实用的5个属性
- 20个实用便捷的CSS3工具、库及实例
- Silverlight实用窍门系列:51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作【附带源码实例】
- 24款非常实用的CSS3工具终极收藏
- 实用命令实例-tcpdump
- CSS3图标图形生成与currentColor实例页面
- DIV CSS遮罩层 简单实用小实例
- python 文件读写5个实例
- 大饱眼福 7款类型各异的CSS3实用菜单
- MySQL查询优化的5个实用技巧
- 9款大气实用的HTML5/CSS3注册登录表单
- 39个超实用jQuery实例应用特效