在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底圖,方便又快速
非常的實用,謝謝你的分享
很棒 謝謝呢!
這網站太殺了!!
好像在用DW一樣!!超好用又簡單~
謝謝分享喔~你幫了我好多^^~