分享到 Facebook 分享到 Google+
▌訂閱、追蹤本站最新文章

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 - 字型外觀
【CSS 3.0 Maker 網站資訊】
網站語言:英文
服務性質:免費
如何使用 CSS 3.0 Maker ?

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

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

3.Gradient - 漸層。
ContentPhoto740

4.CSS Transform - 變形。
ContentPhoto740

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

6.CSS Transition - 改變效果。
ContentPhoto740

7.RGBA - 顏色透明效果。
ContentPhoto740

8.Text Shadow - 文字陰影。
ContentPhoto740


9.Box Shadow - Box 陰影。
ContentPhoto740

10.Text Rotation - 文字旋轉。
ContentPhoto740

11.@Font Face - 字型外觀。
ContentPhoto740
延伸閱讀
§歡迎加入臉書粉絲團 §歡迎加入Google+社交圈
目前有0則留言
*暱稱
*電子郵件 (不會公佈)
網址
(1.請輸入完整網址含http:// 2.將會在暱稱後使用該連結)
*留言內容