CSS 3.0 Maker 線上 CSS 3.0 語法產生器

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式，可說是網頁的排版師，也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器，對於所需要的效果，可利用其產生器進行調整設定，便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。CSS 3.0 Maker 可產生網頁效果如下：

• Border Radius - 圓角框
• Gradient - 漸層顏色
• CSS Transform - 變形
• CSS Animation - 動畫
• CSS Transition - 改變效果
• RGBA - 顏色透明效果
• Text Shadow - 文字陰影
• Box Shadow - Box 陰影
• Text Rotation - 文字旋轉
• @Font Face - 字型外觀

1.進入 CSS 3.0 Maker 網站後，先來了解其操作介面，上方的 Menu 可選擇要設定的樣式，左上角的 CSS3 Styles 可以做細部樣式設定，畫面中間有個預覽區可看到調整後的效果；右邊的 CSS3 Codeview 則是CSS的原始碼，產生後可以直接複製到剪貼簿裡或是點擊[Download]來下載已壓縮過的 HTML 檔到自己的電腦中。


2.Border Radius - 圓角框，可以設定將外框加上圓角，並可設定四個角的圓角角度、外框的線條樣式、顏色。其所產生的語法可支援的瀏覽器有 Firefox 3.5+、IE 9+、Safari 3.0+、Opera 10.5+、Chrome 4.1+，行動裝置上可 BlackBerry 6+ 及 iOS 1.0+。


3.Gradient - 漸層。


4.CSS Transform - 變形。


5.CSS Animation - 動畫，設定好之後，可點擊[View Animation]來觀看動畫效果。


6.CSS Transition - 改變效果。


7.RGBA - 顏色透明效果。


8.Text Shadow - 文字陰影。

9.Box Shadow - Box 陰影。


10.Text Rotation - 文字旋轉。


11.@Font Face - 字型外觀。