当前位置主页 > 资料库 > 前端教程 > 如何使用CSS3创建3D文字效果

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

2015-01-02

查看演示 下载地址

你有没有想过使用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效果就做好了希望你喜欢。

查看演示 下载地址

Previous:
上一篇:2014年100个超级漂亮的免费英文字体下载
Next:
下一篇:浅谈HTML5表单验证技术
返回顶部