顛覆網路 35 天 (6b): 動態字體與 CSS 範例

今天 (好吧，又是大前天…) 的顛覆網路 35 天綜合前面所說的 @font-face 及一些 Firefox 3.5 新支援的 CSS，組合成一個有趣的範例。直接看一下：

View the Demo in Firefox 3.5

以下分別簡單說明所用到的東西：

圓角邊框與方塊陰影

首先是整個「工具列」的樣式。我們使用 -moz-border-radius 將左上及右下的邊框設定為圓弧：

-moz-border-radius:10px 0px 10px 0px;

接著利用之前提過的 -moz-box-shadow 設定這個方塊的陰影，分別向右向下位移 5 像素、且柔邊為 6 像素：

-moz-box-shadow: #9BD1DE 5px 5px 6px;

接下來是其中的按鈕，我們也會用到 -moz-border-radius，但額外使用 -moz-box-shadow 來區分按鈕目前狀態。一般的按鈕是普通陰影，不過滑鼠游標移上 (hover) 時則利用 inset 關鍵字設定內部陰影、文字本身也套用 text-shadow 陰影效果。點選按鈕後保持內部陰影狀態，但加深色彩、加大範圍：

#superbox button {
    -moz-border-radius: 5px;
    -moz-box-shadow: #000 0px 0px 8px;
}
 
#superbox button:hover {
    -moz-box-shadow: inset #989896 0 0 3px;
    text-shadow: red 0px 0px 8px;
}
 
#superbox button:active {
    -moz-box-shadow: inset #1C1C1C 0 0 5px;
}

動態連結字體

在此以 @font-face 設定每個按鈕個別的字體，舉第一個按鈕為例：

@font-face {
    font-family: Brock Script;
    src: url("BrockScript.ttf");
    font-style: normal;
    font-weight: normal;
}

.first {
    font-family: Brock Script;
}

@font-face 的說明可以看先前的文章，另外這個範例裡也利用一點 JavaScript 技巧動態替換下方文字段落的類別，以便在你點選按鈕時以相應字體顯示。

利用這些效果，我們就做出了「很像圖片，但不是圖片」的按鈕囉！大家可以試試看。