iT邦幫忙

DAY 8
7

CSS沒有極限系列 第 8

CSS沒有極限 - text-shadow初試身手

text-shadow算是CSS3中較早出現的語法,而且不需要打前輟詞就能夠執行,text-shadow是一個很簡單的效果,但是可以有非常多的變化。
本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-09-23 (建議使用Chrome瀏覽器)


本篇內容同步發表於http://ashareaday.wcc.tw/#2013-09-23 (建議使用Chrome瀏覽器)

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是一個很簡單的效果,但是可以有非常多的變化,以上範例只是一小部分,而說不定現在正在看的各位,已經有新的想法,可以做出新的效果,有機會就分享來給大家知道喔~!


上一篇
CSS沒有極限 - 別忘了偽元素
下一篇
CSS沒有極限 - CSS3的漸層
系列文
CSS沒有極限41

2 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2013-09-23 14:07:29

哇,這個酷!!

最近有開始接觸CSS,發現...落寞,自己不是這個料Orz

卡斯伯 iT邦研究生 2 級 ‧ 2013-09-23 17:49:29 檢舉

我也不是><

我要留言

立即登入留言