如何使用CSS3创建3D文字效果

查看演示 下载地址

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

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

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

HTML结构:

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

<div id="wrapper">
 <h1>CSSReX</h1>
 <p>This works well with major Browsers like FireFox, Opera, Safari and Chrome however does not work with Internet Explorer!</p>
</div>
                            

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效果就做好了希望你喜欢。

查看演示 下载地址