前言

在前几节中,我们使用画布元素创建了投影、斜面以及内侧阴影。使用CSS3可以让文本真的站起来。使用CSS3的text-shadow属性,可以让文本看起来好像伸出屏幕来面对用户。


准备工作

如果你想直接跳过本节,你可以从Packt Publishing的网站上下载代码。否则,如果你想边学边做,那就一起来创建属于你自己的3D文本吧。下面将通过组合多个CSS3的阴影效果来实现3D特效。


实现方式

在IDE中,创建一个在body元素中只有一个header元素的HTML文档。在head标签中设置一些样式,并给header元素设置color:#f0f0f0;,如下面代码片段所示:

CSS - 使用CSS3制作3D文本_3d

现在再添加7个X和Y方向递增或递减的text-shadow系列属性,如从0px 0px0px#666到-6px-6px 0px #666。

CSS - 使用CSS3制作3D文本_css3_02

现在可以看到header已经跨出了屏幕。好了,几乎完成了!为了确保它真的能够弹出屏幕,我们需要再加些效果。当在屏幕上创建任何3D对象时,给予它一致的照明和阴影是相当重要的。因为该文本向上跃起,所以需要一个阴影。

添加另外6个X和Y方向的text-shadow属性,只是坐标值为正值,颜色相对较浅(color:#ccc;)。

CSS - 使用CSS3制作3D文本_阴影效果_03

这个阴影效果还可以,但是看起来还是有点假。好吧,把它提高到另一个层次。我们把元素背景模糊变暗。Text-shadow属性的第3个数字用以实现模糊效果,所以设置一个递增的值使其越来越模糊:0、0、1、1、2、3和5,如下面的代码所示。除此之外,后面的背景色也应该越来越暗:#888、#777、#666、#555、#444、#333和#000。

CSS - 使用CSS3制作3D文本_3d_04

现在header有了一个完全逼真的3D效果。下面的截图显示了这个特效。

CSS - 使用CSS3制作3D文本_阴影效果_05


工作原理

尽情试验和体验本方法的不同组合方式,来实现那些令人欢呼的字体效果。CSS3将字体设计带到了一个全新水平,而之前要想达到如此深度的定制特效却总是苦难的事情。CSS3不仅做到了,并且做得很好。

text-shadow属性可以处理大量的阴影属性。因此,你可以把这些阴影按照与文本之间的距离依次堆叠起来。随之而来的,你的文本拥有了3D特效。