網頁設計-蓋婭科技有限公司 -- 網頁設計 - CSS文字陰影效果(各瀏覽器通用)
正在加載......
X
 
會員帳號 :
會員密碼 :
忘記密碼    加入會員

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR

網頁設計 - CSS文字陰影效果(各瀏覽器通用)

網頁設計 - CSS文字陰影效果(各瀏覽器通用)

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


範例


文字陰影效果範例

這行只有IE看的到效果

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


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


IE用:filter


IE的用法是使用以下參數
p.demoIE{
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF', 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 #FFFFFF;
}


參數說明:

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


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


: NT 0
   

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR


蓋婭科技網站導覽

站內搜尋

Loading

協力廠商

最後更新 : 01/19/2016

gotop