如何使用CSS3创建3D文字
2013-08-17 10:48:32;  来源:cssrex.com;  作者:;  评论:0 点击:

我很高兴地看到,CSS3终于消除了Photoshop的使用提供文本阴影。我只是想我的手在CSS3文字阴影和想创建3D文字给多个阴影,并得到了一些精彩...

我很高兴地看到,CSS3终于消除了Photoshop的使用提供文本阴影。我只是想我的手在CSS3文字阴影和想创建3D文字给多个阴影,并得到了一些精彩的 ​​东西。

先前的文本阴影宣布CSS2年初以来,然而,唯一支持此功能的浏览器是Safari浏览器。

如果你谈论今天的条件下,几乎所有的正在运行的Internet Explorer浏览器,除了文字阴影成功。

我同意我们将无法使用这些阴影,为客户跨浏览器的兼容性,因为未来几年,然而这些功能可以帮助您今天推动现代网络技术的界限

我们确实有一定的jQuery插件,如IE浏览器的CSS阴影,可以创建阴影的文字完全与Internet Explorer兼容。

\

让我们来学习如何使用CSS3创建3D文字我给文字阴影,标题和段落标签。

将降落在body标签之间的HTML代码写在下面。

<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>

Here we have the CSS for giving heading and paragraph multiple shadows to give 3D effect.

#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);
}
本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。http://www.zhuitaiyang.com/html/divcss/336.html

相关热词搜索:使用 CSS3 创建 3D文字 文字效果

上一篇:30 个很有用的 CSS3 教程资源
下一篇:使用CSS3实现超酷文字阴影的文字效果

收藏
回到顶部