網頁設計

關於網頁設計的技術或相關資訊分享

CSS文字陰影效果(各瀏覽器通用)

CSS文字陰影效果(各瀏覽器通用)

有時阿,在進行網頁設計時,在一些標題或者是重點的地方,想要將那邊的文字做些效果,一般作法就是字體加大、粗體、換顏色,不然就是加個斜體底線,如果想要更花俏的效果,例如 陰影、光暈等效果就得要把標題作成圖片再貼圖,可是這樣的話,網頁的開啟速度就會受到影響,也許一個標題還好,但是如果整個網頁都是這類型的話,累積下來還是很多的,另外也不利搜尋引擎收錄網頁內容,這也不大好,今天就來教大家如何用CSS語法讓文字有陰影效果,先來看個範例。

範例

文字陰影效果範例

這行只有IE看的到效果

這行只有Firefox、Google瀏覽器看的到效果

為什麼還會有只有IE看的到跟只有Firefoxc和Google瀏覽器看的到的狀況呢,這是因為這是分別套用了各自的CSS語法,所以會有這樣的效果,下面就來分別解說各自的CSS語法吧

IE用:filter

IE的用法是使用以下參數

 p.demoIE{ 
filter:progid:DXImageTransform.Microsoft.Shadow(color='#333', Direction=135, Strength=3);
}

參數說明:

  • color:代表顏色,可用各種表示方式,例如red,#FF0000都是代表紅色
  • Direction:角度,螢幕正上方為0度,右方是90度,下方是180度,左方則是270度
  • Strength:效果強度,單位是PX

小提醒:要套用濾鏡的屬性之前,你必須要先讓那個物件有Layout屬性,怎樣讓他有呢?可以給一個指定的height、width,或者是把position屬性設定為absolute等。

Firefox、Google瀏覽器用:text-shadow

Firefox、Google瀏覽器的用法是使用以下參數

p.demoFF{ 
 text-shadow: 3px 3px 3px #333;
}

參數說明:

  • 第1個數字:X軸的位移,往右邊是正的,往左邊是負的
  • 第2個數字:Y軸的位移,往上是正的,往下是負的
  • 第3個數字:模糊的距離,單位是PX
  • 顏色:依樣可以使用各種不同的表示方法

如何,這樣是不是就可以很簡單的做出陰影效果,快又方便!但是這兩個屬性其實效果還是有所差別的,用的時候還是請斟酌使用,要記得個瀏覽器都檢查過,不要某個瀏覽器很漂亮,另外一個瀏覽器卻慘不忍睹,這樣就不好囉。

Reference:Shadow Filtertext-shadow

Please enable the javascript to submit this form