关注前端开发
关注用户体验

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

赞(0)
未经允许不得转载:大前端 » 5个实用的CSS3实例
分享到: 更多 (0)

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #10

    Enjoyed the post.

  2. #9

    Nice post! Thank you.

  3. #8

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  4. #7

    Well done! I thank you your blog post to this matter. It has been useful. my blog: lemonade diet

    Zachariah Tusa2周前 (04-08)回复
  5. #6

    I got what you intend, saved to my bookmarks , very decent website .

  6. #5

    i do a lot of article submissions in a week or two and i hire some writers from india and other countries to do my stuf..

    Mauro Christaldi1个月前 (03-11)回复
  7. #4

    Hi, i believe that i saw you visited my web site thus i got here to “go back the want”.I’m trying to in finding things to enhance my web site!I guess its good enough to use some of your ideas!!

    Grady Monterrano1个月前 (03-09)回复
  8. #3

    some times its a pain in the ass to read what people wrote but this internet site is real user friendly ! .

    Rocket French8年前 (2011-01-13)回复
  9. #2

    @vicnent: 嗯 天煞的IE 你的站不错啊

    浩子9年前 (2010-06-09)回复
  10. #1

    CSS3灰常灰常强大,看的我兴奋不已,但一想到IE浏览器…… 感觉它是一个拖累时代发展的“累赘”。

    vicnent9年前 (2010-06-09)回复

themebetter 国内更好的WordPress主题服务商

立即前往