2009年2月27日

立體字

雖然 CSS 有定義 text-shadow 這個特徵,可以用來作立體字,可是 text-shadow 只有 Safari 有支援;IE, Firefox, Chrome 都沒法用。這個練習發揮土法煉鋼的精神作出立體字。這個練習用到以下特徵與方法。

  1. DIV:用來定義父區塊與子區塊。
  2. position:可以定義區塊佈局的方式。父區塊必須設成 relative,子區塊則設成 absolute。
  3. top, left:用來設定子區塊的位置。
  4. font3D(text, clr, dx, dy, layers):此函式可以輸出立體字。參數 text 是要輸出的字串。clr 是最上層字面的顏色。dx, dy 是兩個字面間的距離。layers 是字面層數,最多十層。

首先用 CSS 作立體字。通常立體字用在較大的字才看的出效果,而且字距要加大,以免重疊。下面的範例將子區塊重疊在父區塊上,並且用 top, left 偏移子區塊一小段距離,以作出立體字的效果。子區塊的背景色必須是透明(transparent)。在 IE6 中必須設 line-height:64px 否則在部落格會失誤。

使用 javascript 產生立體字


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。