本篇會介紹許多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眼鏡都可以看的版本。