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

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 檔到自己的電腦中。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

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

3.Gradient - 漸層。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

4.CSS Transform - 變形。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

5.CSS Animation - 動畫,設定好之後,可點擊[View Animation]來觀看動畫效果。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

6.CSS Transition - 改變效果。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

7.RGBA - 顏色透明效果。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

8.Text Shadow - 文字陰影。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

9.Box Shadow - Box 陰影。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

10.Text Rotation - 文字旋轉。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

11.@Font Face - 字型外觀。
CSS 3.0 Maker 線上 CSS 3.0 語法產生器

相關文章



 站內搜尋 


˄