[工具]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底圖,方便又快速
Share on Google Plus

About Nowill Chang

從踏入網路世界的第一天開始就不斷熱衷研究網站的各種事宜,目的是讓台灣人製作的網站也可以追上國際設計潮流。目前是品禾全端網路工作室實習掃地僧,企圖用最少的資源創造最新的網路公司營運模式。公司的理念是“開發更有價值的跨平台網站與網路應用程式”,Line帳號:nowill,歡迎閒聊泡茶喝咖啡。
    Blogger Comment

3 位過客留言,我也要留言:

  1. 非常的實用,謝謝你的分享

    回覆刪除
  2. 很棒 謝謝呢!

    回覆刪除
  3. 這網站太殺了!!
    好像在用DW一樣!!超好用又簡單~
    謝謝分享喔~你幫了我好多^^~

    回覆刪除