3d字体阴影HTML5,如何使用CSS3创建3D文字效果

你有没有想过使用CSS3来制作像photoshop那样的3D文字效果？通过使用CSS3的text-shadow属性，我们完全可以制作出这样一个炫酷的3D文字效果。以前在CSS2的时代，只有Safari浏览器支持text-shadow属性，现在，所有的现代浏览器都支持该属性。

对于IE浏览器，我们可以通过jQuery插件的方式来制作同样的3D文字效果。可以查看jQuery扁平化图标文字长阴影特效插件。

下面我们来看一下用CSS3制作3D文字效果的方法。

HTML结构:

我们将给标题和p标签中的文本添加阴影效果。

CSSReX

This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!

CSS样式：

为制作文字的3D效果，我们使用了多重阴影技术。

#wrapper h1{

font:normal 60pt Arial;

color:#FFFFFF;

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 3px 0 #bbb,

0 4px 0 #b9b9b9,

0 5px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.15);

}

#wrapper p{

font:normal 40pt Arial;

color:#FFFFFF;

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 3px 0 #bbb,

0 4px 0 #b9b9b9,

0 5px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.15);

}

so easy!一个文字的3D效果就做好了希望你喜欢。