運用 CSS3 美化你的個人網站

最近幾年國際上的網頁設計師互相大力疾呼及提倡“網頁標準化” (web standard) 的活動下，漸漸的很多設計師都朝向以
CSS+XHTML 為標準的網頁設計技巧。更進階的設計師還會以 AJAX+JQuery
等的程式技術來輔助設計出更親使用者的網頁。現在有好消息，在即將推出的 CSS3
規範中，提供了幾款全新的技術規範，能夠提供給設計者設計出更有彈性、更具爆發力的網頁。

雖然短期之內我們可能無法將這些技術運用到一些商業的、或是我們日常的公司專案當中，不過對於自行設計部落格、網站，或是經營社群服務的設計者來說，這些技巧將是不可或缺的 eye candy.

以下將針對幾個特別的技巧說明一下：

1. 邊角半徑 (Border Radius)

以目前來說，被使用最多的應該就是邊角半徑了。也就是圓角邊界的意思。一般標準的 HTML 僅允許直角的邊角設定，也就是 90 度角。在新的 CSS3 規範裡面我們將可以使用圓角邊界。請看語法：

1. -moz-border-radius: 20px;
2. -webkit-border-radius: 20px;
3. border-radius: 20px;
   

邊角半徑也可以用來為個別的角設定數值，不過 -moz- 跟 -webkit- 的語法稍稍有點不同：

1. -moz-border-radius-topleft: 20px;
2. -moz-border-radius-topright: 20px;
3. -moz-border-radius-bottomleft: 10px;
4. -moz-border-radius-bottomright: 10px;
5. -webkit-border-top-rightright-radius: 20px;
6. -webkit-border-top-left-radius: 20px;
7. -webkit-border-bottom-left-radius: 10px;
8. -webkit-border-bottom-rightright-radius: 10px;
   

邊角半徑的設定支援 Firefox, Safari 以及 Google Chrome 等瀏覽器。

參考範例：Twitter.

2. 邊角圖形 (Border Image)

邊角圖形，顧名思義就是讓我們可以用圖形來設定邊角。我們必須先設計出一個與各邊具有關聯性的 HTML 物件，再利用以下語法設定：

1. border: 5px solid #cccccc;
2. -webkit-border-image: url(/images/border-image.png) 5 repeat;
3. -moz-border-image: url(/images/border-image.png) 5 repeat;
4. border-image: url(/images/border-image.png) 5 repeat;
   

{border: 5px} 規範了整體的邊界範圍，然後再以邊角圖形設定指出圖片來源以及告訴瀏覽器要以多少的圖形來填滿那個 5px 的空間。

邊角圖形也可以個別設定不同的圖形以吻合四個不同的邊角：

1. border-bottom-rightright-image
2. border-bottom-image
3. border-bottom-left-image
4. border-left-image
5. border-top-left-image
6. border-top-image
7. border-top-rightright-image
8. border-right-image
   

邊角圖形的設定支援 Firefox 3.1, Safari 以及 Google Chrome 等瀏覽器。

參考範例：Blog.SpoonGraphics .

3. 區塊陰影 及 文字陰影

陰影特效；雖然凱雅客並不是特別的偏好，不過我相信有很多設計師可是非常的愛用的。不過陰影可是很容易就會讓你的設計很屌或是馬上 low 掉喔！不可不慎。

現在有了 CSS3, 你根本不再需要 Photoshop 了。最近我們看過很棒的設計：24 Ways website . 就把陰影運用得很好。

1. -webkit-box-shadow: 10px 10px 25px #ccc;
2. -moz-box-shadow: 10px 10px 25px #ccc;
3. box-shadow: 10px 10px 25px #ccc;
   

前面兩個數值定義了物件陰影的間距，在這個例子，X 跟 Y 軸個別 10 pixel. 第三個數字是定義了陰影模糊的範圍，最後定義陰影的顏色。

當然了，文字陰影的特效與法也提供了給文本內容來運用：

1. text-shadow: 2px 2px 5px #ccc;
   

陰影特效的設定支援 Firefox 3.1, Safari, Google Chrome (只支援區塊陰影) 以及 Opera (只支援文字陰影) 等瀏覽器。

參考範例：24 Ways .

4. RGBA 及 Opacity 簡易的設定透明度

過去以 PNG 圖檔來設定透明背景或圖形已經是一個重要的設計技巧。不過現在我們可以用 CSS3 來設定了。

1. rgba(200, 54, 54, 0.5);
2. /* example: */
3. background: rgba(200, 54, 54, 0.5);
4. /* or */
5. color: rgba(200, 54, 54, 0.5);
   

前面三個數值分別設定了紅、綠及藍色的 channel, 最後一個數值則是定義 alpha channel 來設定透明的效果。

或者我們也可以用一般的顏色設定模式，搭配透明度設定來使用：

1. color: #000;
2. opacity: 0.5;
   

透明特效的設定支援 Firefox 3.1, Safari, Google Chrome, Opera 以及 IE7 (部分修正) 等瀏覽器。

參考範例：24 Ways (RGBA).

5. 以 @Font-Face 來設定網頁字型

之前凱雅客發表過一篇“我最喜歡的字型”裡面有提到網頁設計總是會使
用那組安全字型：Arial, Helvetica, Verdana, Georgia, Times New Roman…..等等。現在利用
CSS3 的 @font-face
我們可以直接呼叫外部連結的字型來運用在我們的網頁裡。不過這樣做一定多少會有版權的問題，所以可供使用的字型不外乎就那些，尤其又以中文設計者而言，可
供運用的字型更少了。

@font-face 可以這樣來運用：

1. @font-face {
2. font-family:‘Anivers’;
3. src: url(‘/images/Anivers.otf’) format(‘opentype’);
4. }
   

其他的網頁字型或是第二順位字型就用原來我們使用的方法：

1. h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;
   

透明特效的設定支援 Firefox 3.1, Safari, Opera 以及 IE7 (配合一大堆的修正…@@) 等瀏覽器。

參考範例：TapTapTap .

雖然 CSS3 還在發展階段，不過某些瀏覽器已經對 CSS3 支援度頗高。這其中以 Apple 的 Safari
提供最廣大的支援。不過基於 Safari 在市場上的佔有率，若是專為 Safari 使用者運用以上所提 CSS3
設計並不是一個非常聰明的做法。不過以 Apple 在市場上漸漸以其家用娛樂產品的目標擴大發展，提供 Safari 支援也是設計師必須要考量的。

另外一方面，FireFox，自從推出正式版以來，漸漸拉攏相當多的使用者，而且加上即將推出的 3.1 版也提供了對 CSS3 極佳的相容性。以目前 FF 的佔有率來看，屆時也將會有相當大的族群會使用到這些新的 CSS 特效。

再來是去年甫發表的 Google Chrome。基於 WebKit 引擎的 Chrome 跟 Apple 的 Safari
有相當多的相似之處。在 Safari 提供 Mac 使用者針對 CSS3 的廣大支援， Chrome 相對的提供給 Windows
使用者更多的相容選擇。

以 W3
所發表的數字來看，截至 2008 年 12 月為止，W3School 有 44.2% 的使用者以 Firefox 瀏覽它們的網頁，Chrome
占 3.1% 而 Safari 占 2.7%. 這代表了有將近 50%
的網路使用者將可以看得到以上所提的特效。而在網頁設計這個對於瀏覽器使用的自主及自覺性更高的族群呢？根據 Blog.SpoonGraphics 的數字，更是高達 73.6% 的人可以使用這些新特效。

不過，以現階段來說，使用這些新功能並不是沒有它的風險的：

• Internet Explorer：有 46% 的 IE 使用者將看不到這些效果，也就是說，不建議運用這些效果做為您的關鍵設計。永遠都要確定你有為 IE 準備好備用的選項，不然只會增加你的困擾喔。
• 無效的 CSS：CSS3 目前還沒到發展的最後階段，它只適用在以不同標籤標定的瀏覽器上，所以極有可能這會讓你的 CSS 變成無效。
• 更多標定的工作：基於上面那點，你必須要為各個不同的瀏覽器設定不同的標籤，增加您在開發階段的工作。
• 潛在的人為因素：可以運用舊式效果達到的我建議還是用 Photoshop 來做吧，免得哪天市場行銷的人愛上哪個不相容的效果，我們設計人員就倒大楣了。^^

引自：Push Your Web Design Into The Future With CSS3

出處： http://kaiak.tw/?p=404 , http://www.comsharp.com/GetKnowledge/zh-TW/CMS_K696.aspx