CSS - 使用CSS3制作3D文本

前言

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

准备工作

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

实现方式

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

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

现在可以看到header已经跨出了屏幕。好了，几乎完成了！为了确保它真的能够弹出屏幕，我们需要再加些效果。当在屏幕上创建任何3D对象时，给予它一致的照明和阴影是相当重要的。因为该文本向上跃起，所以需要一个阴影。
添加另外6个X和Y方向的text-shadow属性，只是坐标值为正值，颜色相对较浅（color:#ccc;）。

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

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

工作原理

尽情试验和体验本方法的不同组合方式，来实现那些令人欢呼的字体效果。CSS3将字体设计带到了一个全新水平，而之前要想达到如此深度的定制特效却总是苦难的事情。CSS3不仅做到了，并且做得很好。
text-shadow属性可以处理大量的阴影属性。因此，你可以把这些阴影按照与文本之间的距离依次堆叠起来。随之而来的，你的文本拥有了3D特效。