三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

采用CSS3的语言框效果
作者:Neoxone    发表时间: 2011年03月9号,星期三     阅读:8,740 次

我们之前有利用css3做过一个投影效果:纯css打造投影效果——CSS3属性transform的应用
主要是利用了transforms系列属性。
另外,在这篇文章里:CSS3的崛起——体验webkit的3D-Effect
我们还讨论了目前仍属于webkit独有的3d-transforms属性。

今天这个效果的实现还是用到了transform(之中的skew)。
起源是论坛里的这个帖子:http://bbs.blueidea.com/viewthread.php?tid=3012730

看代码

上面的代码中,我们可以看见有一句ie的滤镜注释,那是ie的阴影滤镜。
其实ie在很早的时候就开始以滤镜的形式支持各种变形和阴影了,所以如果你想让ie(9以下)浏览器也能展现css3的那些效果,你也可以考虑滤镜实现。
并且,有人已经帮你实现智能转换了。非常轻松,看这里:http://www.useragentman.com/IETransformsTranslator/

而如果你不屑于ie的滤镜,认为那是即将被淘汰的事物了,那不妨看看3d-transforms以及Animation属性这种目前只有webkit支持的,未来或许能进入css3标准的东西。
http://westciv.com/tools/transforms/index.html (除一般的transforms的演示外,还有3d-transforms和Animation的演示)。

最后,提醒一句,transform属性并非css3独有,svg,canvas中也都有实现,当然他们的写法非常类似。
下面是一个canvas中的transform属性可视化演示:http://www.cssass.com/blog/index.php/2010/817.html

标签: , , , ,

2 条评论 发表在“采用CSS3的语言框效果”上

  1. power cord 说:

    不错,这个可以把留言改成头像再加这个于语言框。

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(