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

發表: 2010-08-31 11:57 分類: 網路服務 | 5 則迴響 » | 瀏覽:19,504 人次

標籤 : ,

image

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的發展:

  • 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網站的畫面如下:

image

畫面上方可選擇要設定的樣式,左上角的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+。

image

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

image

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

image

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

image

5.CSS Transition(改變效果):可設定在滑鼠移動到該區塊上方時,所出現的特殊效果。

image

6.Text Shadow(文字陰影):設定文字陰影的位移量、模糊程度及陰影顏色。

image

7.Box Shadow(盒子陰影):可將區塊的外框加上陰影效果,更具立體感。

image

8.Text Rotation(文字旋轉):可設定文字的傾斜角,IE 7.0以上有支援。

image

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

image

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

image

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

延伸閱讀

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

Opera大談HTML5與CSS3 抨擊Flash

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

喜歡本站的文章嗎?
歡迎大家按個「讚」給我鼓勵一下吧!




相似文章




喜歡㊣軟體玩家的文章嗎?歡迎加入《軟體玩家FB粉絲團》吧!
或是按下<這邊>來訂閱RSS!


隨機文章

迴響:

歡迎留下您的意見!


※PS: 因為阿正老師時間有限,且本站所介紹的軟體種類太多(所產生的狀況也很多),可能無法回答一一回答讀者們的問題(尤其像是出現某某錯誤訊息,或者操作過程中哪邊卡住),您可以先上Google搜尋相關的關鍵字,或是到軟體的官方網站/論壇來爬文,不便之處還請見諒。
※PS:本站不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取該類檔案。
※PS:本站因採用反向代理(Reverse Proxy)技術,留言後必須等到20分鐘後快取網頁過期才會顯示。