前言
在前幾節中，我們使用畫布元素建立了投影、斜面以及内側陰影。使用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效果。下面的截圖顯示了這個特效。