網頁設計的好幫手 — CSS 3.0 線上產生器

CSS是許多網頁設計師所必學的標準之一，它能讓網頁更精準的呈現，可說是網頁的排版師。隨然瀏覽器的逐漸進化，CSS標準也從1.0、2.0到最新的3.0，提供了更多的樣式及效果，讓網頁變得更生動，而且省去了用Flash或是美工軟體來製作特殊效果的麻煩。今天要介紹的這個CSS 3.0 Maker就是一個相當好用的線上CSS碼產生器，只要選擇需要的效果，然後利用產生器調整一下，就能產生你所需要的CSS 3.0代碼，相當方便好用喔，有從事網頁設計的玩家可別錯過了！

W3C(World Wide Web Consortium,全球資訊網協會)是由Internet的發明人Tim Berners-Lee在1994年建立，該協會專門制定各種的網頁標準(只是推薦標準，非強制標準)，讓網頁在不同的平台、瀏覽器都能正確地顯示網頁內容，其中CSS就是W3C所制定的標準之一。

CSS（Cascading Style Sheets，層疊樣式表／串樣式列表）是專門用來定義網頁樣式的標準，目前最新的版本為CSS 3，不過CSS 3目前還仍在開發中，尚未完全定案，而且IE支援的樣式還相當少，目前還沒成為網頁設計的主流。

CSS官方首頁：http://www.w3.org/Style/CSS/ [中文翻譯網頁] W3C的CSS驗證服務：http://jigsaw.w3.org/css-validator/

CSS的發展：

1996年12月發表CSS1

1998年5月W3C發表CSS2

2005年開始發展CSS3

CSS 3.0 Maker介紹

今天阿正老師要介紹的是CSS 3.0 Maker這個網站，他能讓你輕鬆設定要顯示的特殊效果，然後將CSS碼給呈現出來，省下了不少記憶代碼的麻煩。

CSS 3.0 Maker網址：http://www.css3maker.com

進入CSS 3.0 Maker網站的畫面如下：

畫面上方可選擇要設定的樣式，左上角的CSS3 Styles可以做細部設定，畫面中間有個預覽區可看到調整後的效果。右邊的CSS3 Codeview是CSS的原始碼，你可以直接複製到剪貼簿，或是按〔Download〕下載已壓縮的HTML檔到自己的電腦中。

下面便簡單介紹一下CSS 3.0 Maker裡面的樣式：

1.Border Radius（圓框效果）：可以設定將外框加上圓角，並可設定四個角落的圓角半徑、外框的線條樣式及顏色。目前只支援Firefox 3.5+、Safari 3.0+、Opera 10.5+、Chrome 4.0+。

2.Gradient（漸層效果）:可設定背景顏色的漸層色，分成線性及放射狀漸層兩種。目前只支援Safari 4.0+及Chrome 4.0+。

3.CSS Transform（變形效果）:可讓整個區塊旋轉、放大、縮小、傾斜及改變位置。

4.CSS Animation（動畫效果）：可製造簡單的動畫效果，讓網頁中的元件可以動起來，包括前面介紹變形的四種效果(旋轉、放大、縮小、傾斜及改變位置)，並可設定動畫的時間及次數。

5.CSS Transition（改變效果）：可設定在滑鼠移動到該區塊上方時，所出現的特殊效果。

6.Text Shadow（文字陰影）：設定文字陰影的位移量、模糊程度及陰影顏色。

7.Box Shadow（盒子陰影）：可將區塊的外框加上陰影效果，更具立體感。

8.Text Rotation（文字旋轉）：可設定文字的傾斜角，IE 7.0以上有支援。

9.@Font Face（字型外觀）：可設定要使用字型的種類、尺寸及樣式。

看了以上那麼多種效果，是不是躍躍欲試了呢？不過美中不足的是微軟的IE瀏覽器目前僅支援了一種效果，實在少得可憐，希望微軟能爭氣一點，趕快推出IE 9.0，改進一下網頁的支援度，不然8.0還在Acid3拿下少少的20分實在很慘啊～～(9.0測試版已經拿到95分了)

Acid3是一個用來測試瀏覽器及設計軟體之標準相容性的網頁。
網址是：http://acid3.acidtests.org/

延伸閱讀

你的瀏覽器跑多快？七套瀏覽器用線上測速器PeaceKeeper大車拼！

Opera大談HTML5與CSS3 抨擊Flash

另一套CSS3產生器：http://css3please.com/