[工具]15種CSS與HTML語法產生器

在CSS3與HTML5在瀏覽器上表現越來越成熟之後，隨之而來的就是幫助設計師能在最快的時間內上手的方法，除了傳統的嗑文件之外，當然還有更快更方便的工具—語法產生器，為什麼需要產生器呢？不外乎就是為了讓你不需要嗑文件，只需要透過一些選擇或設定的步驟，就可以馬上弄出你想要的效果，本篇融合了之前我所寫過的10種CSS語法產生器 ，加上了一些較新穎的產生器，讓大家可以繼續在兩三分鐘內就走在技術最前端。

1-CSS 3.0 Maker

CSS 3.0 Maker顧名思義就是可以產生CSS3的語法產生器，你可以在網站上的方寸之間就調整出你想要的效果，網頁下方還有提供能支援的瀏覽器資訊，在主選單你可以看到許多不同的選像，網站整體佈局也非常的簡單易懂，左邊負責調整、中間負責視覺顯示、右邊提供CSS3 Code複製與下載，如果需要更詳細的教學請參考關鍵應用中的CSS 3.0 Maker 線上 CSS 3.0 語法產生器一文

2-CSS Warp

CSS Warp是一個可以把文字加上曲線，讓文字旋轉、彎曲的CSS與Html產生器，當你調整好你要的形狀後，按下Generate HTML，就會看到針對IE 9、Webkit、Firefox、Opera瀏覽器所產生出來的CSS與HTML

3-CSS3 Button Maker

CSS3 Button Maker是一款CSS3的按鈕樣式產生器，你可以透過CSS3的一些特性變出以往你可能要使用圖片才能製作出來的效果，現在透過CSS3你不用在這麼累了，而且對整體網站http連接數的瘦身也是非常有效果

4-List-O-Matic 選單產生器

你是否覺得用List條列式做選單是很困難的一件事？現在只要上List-O-Matic 打好選單、選好樣式，你就可以不費吹灰之力就把選單做好了！是不是很快、狠、準阿

5-CSS Menu Maker - CSS選單產生器

CSS Menu Maker是一個CSS按鈕產生器，透過幾個步驟就可以產生不錯的CSS選單，美觀又大方，而且還有多種樣式供您選擇，真的是製作CSS選單的最佳利器

6-Purecss menu

Purecss menu是一款CSS選單產生器，只要跟著網站左邊的步驟一步一步設定，就可以得到不錯的CSS選單

7-Primary CSS

Primary CSS 是一個簡單的CSS格線系統，只要選擇你要的切板樣式，然後複製CSS與HTML語法就可以直接使用，對於覺得格線系統太過複雜的CSS DIV 切板初學者來說，算是個不錯的入門練習題，看著上方的圖片，照著圖片的顯示去切版，然後在對照一下Primary CSS的答案，基本上練過一輪就會覺得CSS+DIV的使用一點都不難喔

8-CSS Layout Generator格線系統產生器

CSS Layout Generator是一個可線上調整設定，根據個人需求的不同，而產生出來的格線系統，你甚至還可以更改Doctype的設定呢

9-Yaml Builder

Yaml Builder算是一個蠻知名的CSS格線系統產生器，採用拖曳式編排，所以靈活度相當的高，對於簡易格線系統產生器無法滿足的朋友，這款應該是非常可以符合您的需求

10-htaccess 檔案產生器

htaccess是一個htaccess檔案的產生器,不懂怎麼寫htaccess 檔案?那這個產生器會是你最好的幫手

11-Spiffy Corners 圓角CSS產生器

正如其名，這是一個產生圓角CSS的產生器，他產出的可不是圖片喔，而是用CSS製成的圓角，百分之百無圖片，想減少http連結次數的設計師可以考慮一下，不過也要注意一下瀏覽器的相容性問題，如果覺得太難解決，還是建議用下面介紹的比較妥當

12-Spiffy Box CSS圓角矩型產生器

這跟上一篇是同作者，也正如其名，他是一個產生圓角圖片與CSS的產生器，出來的成果會比上面的好一些，但是缺點就是檔案較大，評寬吃的多一些，畢竟網站有時下載完成的快慢也是很重要的使用者經驗

13-csstypeset文字CSS產生器

這是一個設定文字CSS的產生器，他的使用非常簡單方便也很容易上手，而且可以直接顯示出來，讓你很清楚現在你所調整的設定是什麼樣子，真的是三兩下清潔溜溜

14-CSSTXT-CSS文字樣式產生器

CSSTXT可以讓你產生CSS文字樣式的CSS產生器，打進你要的文字並且做好一些設定，就會自動產生CSS，只要複製起來就可以用囉

15-Scrollbar Color GeneratorCSS捲軸產生器

還記得剛學會做網頁時，那時大家都很流行改變自己網站的捲軸顏色，因為總想與眾不同一下，雖然近年來已經很少見了，而且支援的瀏覽器也只有IE，但是還是嘗試看看喔

以上就是15種CSS與HTML等相關的產生器，有興趣的朋友可以玩玩，想學CSS3卻不知道如何入門，也可以試試看CSS3的產生器，來考驗一下自己對CSS3的掌握程度喔！

同場加映

Tabs Generator

Tabs Generator是一個tab分頁底圖產生器，你只需要調整一些設定就可以馬上製作出tab底圖，方便又快速