Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

5 个实用的 CSS3 实例


对于设计人员和开发人员来说,CSS 一直是 web 设计过程中重要的一部分,随着 CSS3 的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。用纯 CSS 也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持 CSS3 的浏览器)运行,有些只是展示并没什 么实际 用途, 但仅用 CSS 实现出的这些效果似乎没什么可以挑剔的。

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,请点击这里

 

 

转自:http://cnbeta.com/articles/113068.htm


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步