CSS教學:如何利用CSS3製造文字陰影效果

CSS的教學,教大家使用CSS3製造出文字的陰影效果(text-shadow)。要注意目前IE都不支援CSS3!包括IE9

CSS3真的加入了不少好用的東西,像是陰影、圓角,甚至有漸層等,未來更容易就能設計出更美觀的網頁,不需要寫一大堆有的沒的程式,十分方便。雖然目前CSS3仍在開發階段,但目前除了IE系列外,主流瀏覽器都有支援部份CSS3的能力,能夠正常顯示。

有仔細看應該會發現,本站的大小標題都多了點立體感,這就是利用CSS3做出的文字陰影效果,CSS3另外也有區塊陰影的語法,等等會一起介紹,如果你也有部落格、網站的話,可以試一下這個效果。

文字陰影語法為:
text-shadow: x軸位移 y軸位移 柔邊 顏色;

例如:
text-shadow: 1px 1px 2px #777;

呈現效果:
這是TextShadow效果

文字加上粗體:
這是粗體加上TextShadow

把字體改白色,再搭配黑色的陰影就成了另一種風格:
這是白色字體加上陰影

陰影可以一次加上兩個或是更多,只要使用逗號分隔即可。X、Y和柔邊可以是負值。以下我把背景顏色改灰色較為清楚,使用兩組陰影的效果(Safari只能顯示一組)

text-shadow: 1px 1px 2px #333, -1px -1px -1px #FFF;
(對照組僅逗號前面部份)

使用了兩層陰影,創造反光效果。
如果只有一組陰影的比較

不同的X、Y和柔邊,還有字體和陰影顏色的搭配都能有不同的效果,有興趣的就自己慢慢研究囉。

除了文字陰影之外,CSS3也有區塊陰影可以用,但是各瀏覽器要用不同的語法:
box-shadow
-moz-box-shadow
-webkit-box-shadow
一次把這三種加上,就能再各瀏覽器中呈現區塊陰影(還是不包含IE),後面的數值則是和文字陰影一樣。

這是區塊陰影效果
background: #CCC; /* 背景 */
-moz-box-shadow: 3px 3px 5px #333;
-webkit-box-shadow: 3px 3px 5px #333;
box-shadow: 3px 3px 5px #333;

 

區塊陰影也可以有很多變化,甚至用四組陰影讓上下左右顏色都不一樣也是可行的。至於更進階的其實可加的數值不只這幾個,除了x、y和柔邊外,還是像是陰影類型(如inset可創造內陰影效果)、擴展長度(這幾項就加在柔邊後的第四個值),或是和文字陰影一樣,一次使用兩組以上的陰影,可創造出一層一層覆蓋的效果。

比較深入的技巧有空大家在自己實驗看看吧。

2 thoughts on “CSS教學:如何利用CSS3製造文字陰影效果

  1. 在Chrome中,文字的消鋸齒會失效,也就是看起來會有鋸齒狀的邊緣。

發表迴響

你的電子郵件位址並不會被公開。