text-shadow算是CSS3中較早出現的語法,而且不需要打前輟詞就能夠執行。
text-shadow的原理
<div class="text1">入陣曲</div>
.text1 { color: red; text-shadow: 4em 0 0 gray; }
由上範例可得知,紅色的文字是html的純文字,另外灰色的文字就是text-shadow
所產生的新元素。
所以探究text-shadow
的原理,其實他是從原本的文字衍伸出相同的元素,並且額外調整其衍伸出的外觀屬性,調整位置、透明度以及調整模糊的程度。而他的語法結構text-shadow: X值 Y值 blur值 色彩
。
text-shadow的範例
來源參考:http://www.w3cplus.com/blog/52.html
//html <div class="text">當一座城牆 只為了阻擋 所有自由渴望</div>
這一部分都是用同一段文字作為範例。
一般模式
/*CSS*/ text-shadow: 1px 1px 5px gray;
這是最正常的版本,就只是當作一般的陰影在使用,但是這種版本其實會影響閱讀,所以建議不使用。
小陰影
/*CSS*/ text-shadow: 1px 1px 0 white; text-shadow: -1px -1px 0 white;
在陰影的blur值設定為0,和底色的顏色只要做一點點的落差,就能適度的提升閱讀性。而這樣的效果,也會有凹陷的視覺感。
立體字
/*CSS*/ color: #ccc; text-shadow: -1px -1px 0 white, 1px 1px 0 #333,1px 1px 0 #444;
text-shadow
不只可以使用一次,可以利用逗點分隔,不斷地增加新的陰影屬性,而立體字就是這樣的效果。
光暈
/*CSS*/ text-shadow: 0 0 20px orange color: white
也可以將文字做成白色,然後將陰影的模糊程度調高,製造類似光暈的效果。
霓虹燈
/*CSS*/ color: white text-shadow: 0 0 5px white,0 0 10px white,0 0 15px white,0 0 40px #ff00de,0 0 70px #ff00de
同上效果,但是不斷的堆疊層次,內層先使用白色,外層堆疊高彩度的色彩,製造出類似霓虹燈的效果。
復古字
所有自由渴望
/*CSS*/ text-shadow: 3px 3px 0 #555, 5px 5px 0 white color: white
是利用兩個陰影堆疊出來的,可惜的是第一個陰影必須與背景相同顏色。
而其實text-shadow是一個很簡單的效果,但是可以有非常多的變化,以上範例只是一小部分,而說不定現在正在看的各位,已經有新的想法,可以做出新的效果,有機會就分享來給大家知道喔~!