2009/6/11

顛覆網路 35 天 (3a): text-shadow

標籤： , , , ,

這一篇挺有意思，也大致翻一下全文。

text-shadow 原先在 CSS2 規格中出現，到 CSS2.1 被打入冷宮、而 CSS3 捲土重來，Firefox 3.5 正式開始支援。此 CSS 特性人如其名，就是拿來展現文字的陰影效果，不過咱們總是熱情無限創意奔放，不會這麼簡單就放過這個有趣的特效 :P 直接看本文最有趣的範例吧 (你需要支援 text-shadow 的瀏覽器，例如 Firefox 3.5)：

看那七彩的霓虹燈，它的發明者是愛迪生

這個範例同時展示了 text-shadow 的許多功能：你可以設定陰影色彩、位移、柔邊等等，而一段文字也可以同時賦與數個陰影效果。

基本語法

CSS3 規格中的 text-shadow 值定義如下：

none | [<shadow>, ] * <shadow>,

即是「可以指定為 none、無陰影」或「指定一組 (以上) 的 shadow 型態值」。而所謂的 shadow 型態值則定義如下：

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

白話說就是：至少要輸入兩個數量值分別代表水平與垂直位移，可視需求加入第三個數量值調整柔邊效果，也可視需求於最前或最後方加上陰影色彩設定。講這麼多其實還是看依些範例比較快，以下所有範例都會搭配圖片、如此一來即便您使用不支援 text-shadow 的瀏覽器也可以了解意思。首先是簡單的陰影：

text-shadow: 2px 2px 3px #000;
A simple shadow

你是熱血硬派？那來看看不用柔邊的例子：

text-shadow: 2px 2px 0 #888;
I don’t like blurs

光暈效果、多重應陰影

加點創意，就可以變化出有趣的效果，例如極具神祕感的移動光暈：

text-shadow: 1px 1px 5px #fff;
Glowing text

又或者是單純的模糊文字：

text-shadow: 0px 0px 5px #000;
Blurry text

另外，剛說過也可以設定多組陰影：

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
Multiple shadows are hot

在 Opera 9.x 已知可以設定 6 組陰影，而理論上你在 Firefox 3.5 裡可以為文字設定無限組 —— 當然還是控制一下比較好，太花俏也不美觀。

效能、可及性、相容性

用文字替代圖片 (或 Flash) 展現陰影效果好處多多，一方面不用圖片可以節省頻寬、二方面對利用語音瀏覽器的人及搜尋引擎都更好。使用文字，在縮放網頁尺寸的時候也可以獲得比較好的效果。

大部分的瀏覽器都已經支援 text-shadow：

  • Opera 從 9.5 版開始支援。
  • Safari 從 1.1 版開始支援，當然也包括使用 WebKit 為核心的瀏覽器，如 Google Chrome。
  • IE 目前還不支援，但即便如此也至少顯示得出文字。另外如果想在 IE 中達成一樣效果，可以利用微軟專屬的 shadow 及 dropShadow 特性

另外值得一提的是，Opera 9.x 以 CSS2 規格的方式、將先定義的陰影繪於最底層，而 Firefox 3.5 則依據 CSS3 的規格、將先定義的陰影繪於最上層。如果你想定義多重陰影，或許要考慮一下這個效果的影響。

text-shadow 很明顯將成為廣泛流行的樣式，不過當然這類 eye candy 都該注意不要太濫用就是。也請參考其他相關文件：

以及範例：

沒有留言:

張貼留言

歡迎留下您的意見

訂閱： 張貼留言 (Atom)