5个实用的CSS3实例

这里有5个使用CSS3实现的常见效果,你可以马上动手试试看。

1. CSS3按钮

CSS3按钮

你可以创建一些大小、颜色不同的元素(如按钮),而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章,有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒!

2.CSS3柱形图

CSS3柱形图

Ben Lister选列了很多实用的CSS3技巧,包括这个看起来相当不错 的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移,你可以用CSS做出和图片一样令人印象深 刻的效果。

3. CSS3下拉菜单

CSS3下拉菜单

WebDesignerWall的Nick La展示了如何创建一个漂亮的CSS3弹出式下拉菜单,他展示了使用渐变图片和CSS创建的两个版本的菜单。

4. CSS3引用气泡

CSS3对话气泡

这些由Nicolas Gallagher创建的纯CSS引用气泡看起来很棒,你可以稍加修改作为你网页上的blockquote元素。

可以去Gallagher的demo页面看看效果,尤其注意那个twitter的气泡,比twitter官方使用嵌入的方法好。

5. CSS3相册

css3相册

苹果刚刚推出了一些展示HTML5网页效果的页面(HTML5和CSS3往往被联系在一起)。虽然这个使用CSS3创建的 Polaroid-style相册有些过渡和3D效果无法在所有的浏览器中运行,不过这真的是一个很酷的CSS3过渡效果的示例。

想看更多CSS3和HTML5的demo,请点击这里

阅读更多
个人分类: Html 5
想对作者说点什么? 我来说一句

实用css3代码段源码(376个案例)

2015年12月02日 52.75MB 下载

CSS3实用指南》源码

2014年02月07日 4.13MB 下载

css3实用指南(英文版)

2012年10月10日 11.6MB 下载

html5和CSS3思维导图

2017年10月12日 6.54MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭