设计培训分享用CSS3做的几个页面效果

最近一年来，随着各大现代浏览器的纷纷升级，对CSS3的支持渐渐被提上议程。这些浏览器中，支持最多功能的当属Gecko和Webkit两个内核的浏览器，其中Webkit支持的功能要更多一些。尽管它们一般都采用私有属性的方式来提供对CSS3的支持，但这并不影响网站重构者们对那些新功能的追捧和研究。

前几天CSS Globe上推荐了一个CSSwizardry上的页面，是对一些CSS3属性的试验性范例，并且遵循了渐进增强的原理，在不支持高级功能的浏览器（如IE6、7、8）下能看到正常的页面，而在支持CSS3特效的浏览器上可以呈现出更华丽的效果。那些效果挺不错的，在这里和大家分享一下。

第一个例子是关于分栏的：

CSS3里直接设置样式就可以产生分栏的效果了，像这个例子，就是设置了
column-count:3;
column-gap:20px;

第二个例子是鼠标触发表格行和单元格状态的：

这个例子展示了transform的其中一个方法：scale，也就是缩放，配合border-radius和box-shadow，制作出了这种效果。

第三个例子是一个竖向的导航菜单：

这里利用了更多的高级特性，例如颜色渐变背景及动画切换效果，这两个特性只有Webkit内核的浏览器才支持。

第四个例子是图片的展示效果：

这里用到了transform的另一个方法：rotate（旋转），配合box-shadow和transition的动画，做出了以前只有flash才能实现的效果。这个例子同样需要用Webkit核心的浏览器才能看到动画效果。

具体请点击这里观看实际效果，记得使用Firefox3.5以上、Safari4或者Chrome浏览。

想研究CSS3具体内容的，可以参考用CSS3将你的设计带入下个高度，还有腾讯ISD Webteam的同志们归纳总结的CSS3.0中文参考手册。

上一条： UCD设计年会收获：思考、积累、开放
下一条： 网页Web设计中的苹果风