CSS3 文字陰影範例

本篇會介紹許多CSS3文字陰影範例，而text-shadow在瀏覽器的支援度還算高，有興趣的朋友都可以試試。

來源參考：http://www.w3cplus.com/blog/52.html

最普通的版本

text-shadow: 1px 1px 5px black
//text: x-offect y-offect Blur Color

很常用的版本 陰刻與陽刻

text-shadow: 1px 1px 0 black
text-shadow: -1px -1px 0 black

光輝的效果

利用模糊的半徑做出類似光輝的效果。

text-shadow: 0 0 20px orange

利用不同的模糊建立多層次的光輝，這個效果我還挺喜歡的，畢竟設計就是矯情~。

text-shadow: 0 0 5px white,0 0 10px white,0 0 15px white,0 0 40px #ff00de,0 0 70px #ff00de

Photoshop 浮雕效果

利用上面所說的陰刻、陽刻的混和體。

text-shadow: -1px -1px 0 white, 1px 1px 0 #333,1px 1px 0 #444

模糊文字效果

將原本的文字透明後，再將陰影模糊化做出模糊文字的效果。

color: transparent
text-shadow: 0 0 5px red

外框文字

如果有這種需求...，加減用也是不錯的

text-shadow: 1px 1px 0 red, -1px -1px 0 red

3D文字效果

利用一層一層堆疊的方式做出血尿般的3D效果。

text-shadow: 1px 1px rgba(220,220,220,.8),2px 2px rgba(220,220,220,.8),3px 3px rgba(220,220,220,.8),4px 4px rgba(220,220,220,.8),5px 5px rgba(220,220,220,.8)

反過來疊就會變這樣...

復古文字效果

這效果我也很喜歡，是利用兩個陰影堆疊出來的，可惜的是第一個陰影必須與背景相同顏色。

立體影像效果

將原本的文字及陰影都用rgba的方式製作半透明，相信有心的話，可以做出3D眼鏡都可以看的版本。