轉載自：微信公衆号 qianduan1024 前端開發的(de)同名文章

原文：http://www.hongkiat.com/blog/css-code-generator-web-apps/

摘要(yào / yāo)：Web開發人(rén)員們總是(shì)在(zài)尋找可以(yǐ)幫助他(tā)們節省時(shí)間的(de)捷徑。許多優秀的(de)開發人(rén)員工具都能提供這(zhè)些功能，相比于(yú)以(yǐ)往，現在(zài)完成網頁開發的(de)速度已經提高了(le／liǎo)很多。

Web開發人(rén)員們總是(shì)在(zài)尋找可以(yǐ)幫助他(tā)們節省時(shí)間的(de)捷徑。許多優秀的(de)開發人(rén)員工具都能提供這(zhè)些功能，相比于(yú)以(yǐ)往，現在(zài)完成網頁開發的(de)速度已經提高了(le／liǎo)很多。随着基于(yú)浏覽器IDE的(de)興起，Web開發已經不(bù)再拘泥于(yú)桌面型電腦之(zhī)上(shàng)，你可以(yǐ)在(zài)任何一台計算機上(shàng)編寫代碼，甚至是(shì)在(zài)浏覽器中對結果進行實時(shí)測試。

免費的(de)在(zài)線代碼生成器幫你快速的(de)完成網頁搭建和(hé / huò)叠代。隻要(yào / yāo)你确定自己需要(yào / yāo)那種代碼，剩下的(de)事情就(jiù)隻是(shì)找到(dào)合适的(de)工具了(le／liǎo)。我們總結了(le／liǎo)10個(gè)最受歡迎的(de)CSS代碼生成工具，而(ér)且這(zhè)些工具都可以(yǐ)供你免費試用。

1、WAIT! Animate

在(zài)CSS動畫之(zhī)間創建自定義重複性暫停一直以(yǐ)來(lái)都是(shì)一件困難的(de)事情。但是(shì)有了(le／liǎo)WAIT! Animate，你可以(yǐ)用它生成正确的(de)代碼，來(lái)實現這(zhè)個(gè)目标。這(zhè)是(shì)一個(gè)新出(chū)現的(de)網頁應用，不(bù)久之(zhī)前這(zhè)個(gè)工具的(de)制造者Will Stone剛剛将其推薦給我。

每一個(gè)人(rén)都明白CSS過渡和(hé / huò)動畫延遲。但是(shì)這(zhè)種延遲隻會出(chū)現一次，那就(jiù)是(shì)每次動畫開始的(de)時(shí)候。

WAIT! Animate可以(yǐ)讓你在(zài)每次動畫重複的(de)間隙設定一個(gè)自定義暫停，從而(ér)實現動畫的(de)無限期循環。這(zhè)是(shì)一個(gè)非常獨特的(de)CSS代碼生成器，它能夠讓你在(zài)無需重頭編寫代碼的(de)情況下打造動畫效果。

2、CSS3 Generator

CSS3 Generator是(shì)一個(gè)比較傳統的(de)代碼工具，但是(shì)你可以(yǐ)将它運用在(zài)每天的(de)工作之(zhī)中。這(zhè)個(gè)網頁應用有着超過10種不(bù)同的(de)代碼生成器，例如CSS columns、box shadows，甚至還包括了(le／liǎo)更新的(de)flexbox property。

可惜的(de)是(shì)整個(gè)網頁應用都是(shì)動态應用，而(ér)且運行在(zài)一個(gè)單一的(de)頁面之(zhī)中。因此每一個(gè)獨立的(de)生成器都沒有永久鏈接。但是(shì)它使用起來(lái)超級簡單，而(ér)且支持每一種主流浏覽器。

在(zài)打開主頁之(zhī)後，你隻需要(yào / yāo)選擇你要(yào / yāo)使用哪一種生成器，對變量進行一些調節，然後就(jiù)可以(yǐ)複制代碼了(le／liǎo)。可以(yǐ)說(shuō)，它集合了(le／liǎo)所有最好的(de)代碼生成技巧。

3、ColorZilla Gradients

自定義CSS漸變是(shì)一件讓人(rén)頭疼的(de)事情。你可以(yǐ)使用Sass打造自己的(de)mixin，效果也(yě)還可以(yǐ)。但是(shì)如果你不(bù)會使用Sass，或者隻是(shì)需要(yào / yāo)一個(gè)簡單的(de)視覺編輯器，那麽我推薦ColorZilla出(chū)品的(de)Gradient Editor工具。

這(zhè)是(shì)一個(gè)完全免費的(de)工具，而(ér)且擁有類似Photoshop一樣的(de)視覺編輯器，可以(yǐ)生成漸變代碼。你可以(yǐ)通過在(zài)漸變箱中移動滑塊的(de)方式來(lái)改變色彩位置，并且生成CSS代碼。你也(yě)可以(yǐ)用它在(zài)漸變中添加或是(shì)移除顔色，并且改變方向。

4、CSS Type Set

你是(shì)否曾經想過實驗某種排版風格，看看它看上(shàng)去是(shì)什麽樣？CSS Type Set就(jiù)可以(yǐ)幫你完成這(zhè)件事情。你隻需要(yào / yāo)輸入一些文本，然後更新字體、字号、顔色、字間距和(hé / huò)其他(tā)一些變量，一切就(jiù)大(dà)功告成了(le／liǎo)。

所有内容都可以(yǐ)實時(shí)顯示，新的(de)排版在(zài)網頁上(shàng)的(de)樣子(zǐ)一目了(le／liǎo)然的(de)出(chū)現在(zài)你面前。這(zhè)個(gè)工具目前唯一的(de)缺點，就(jiù)是(shì)支持的(de)字體不(bù)夠多。你也(yě)可以(yǐ)使用Google Web Fonts配合Webfont Tester，但是(shì)它并沒有任何CSS輸出(chū)功能。

5、Enjoy CSS

Enjoy CSS網頁應用既是(shì)一個(gè)代碼生成器，也(yě)是(shì)一個(gè)視覺編輯器。你可以(yǐ)用它來(lái)創建各種網頁元素，例如按鈕、輸入框，同時(shí)給它們添加自定CSS3屬性。

你甚至可以(yǐ)用它來(lái)測試Adobe字體，并且給字體添加各種效果，來(lái)觀察它們在(zài)浏覽器中的(de)樣子(zǐ)。但是(shì)Enjoy CSS最好的(de)功能則是(shì)gallery，裏面有着許多免費的(de)代碼段，和(hé / huò)預設的(de)按鍵、輸入框和(hé / huò)其他(tā)元素的(de)模闆。

6、Flexy Boxes

如果你連flexbox最基本的(de)概念都不(bù)理解，那麽你可以(yǐ)試試Flexy Boxes。裏面講述了(le／liǎo)每一版flexbox之(zhī)間的(de)區别，以(yǐ)及渲染引擎對句法的(de)解釋。

由于(yú)flexbox還是(shì)一個(gè)較新的(de)東西，因此還沒有太多的(de)網頁利用了(le／liǎo)這(zhè)個(gè)功能。但

是(shì)當你理解了(le／liǎo)它的(de)工作原理之(zhī)後，在(zài)開發項目的(de)時(shí)候你就(jiù)會輕松很多，并且爲(wéi / wèi)未來(lái)CSS flexbox布局鋪平了(le／liǎo)道(dào)路。

7、CSSmatic

CSSmatic也(yě)是(shì)一個(gè)涵蓋了(le／liǎo)多個(gè)生成器的(de)網頁，它一共有四個(gè)獨立的(de)部分：陰影、邊框半徑、噪音紋理和(hé / huò)CSS漸變。相比于(yú)CSS3 Generator，這(zhè)個(gè)網頁的(de)選項較少，但是(shì)它爲(wéi / wèi)漸變生成器等工具提供了(le／liǎo)獨立的(de)頁面URL。如果你隻需要(yào / yāo)其中的(de)一個(gè)工具，你可以(yǐ)将其獨立放進收藏夾中。

CSSmatic是(shì)少數幾個(gè)包括了(le／liǎo)噪音生成器的(de)網頁之(zhī)一。所有東西都是(shì)在(zài)本地(dì / de)生成，你可以(yǐ)從Thumbr中拷貝生成背景的(de)縮略圖，然後使用background-repeat和(hé / huò)background-image屬性在(zài)CSS中重複。

8、Base64 CSS

前端開發人(rén)員都在(zài)開始接受base64代碼，因爲(wéi / wèi)相比于(yú)傳統圖像，它有着易用性高、對存儲空間要(yào / yāo)求較小等有點。Base64 CSS是(shì)一個(gè)免費的(de)代碼生成器，可以(yǐ)輸出(chū)原始的(de)base6圖像代碼。

你隻需要(yào / yāo)将計算機中的(de)文件進行上(shàng)傳，剩下的(de)事情交給這(zhè)個(gè)網站就(jiù)可以(yǐ)了(le／liǎo)。使用這(zhè)個(gè)應用，你可以(yǐ)增加網頁速度，并且減少頁面上(shàng)的(de)緩存元素。

9、Patternify

如果你不(bù)喜歡使用自己的(de)背景圖像，那麽爲(wéi / wèi)什麽不(bù)創建一個(gè)呢？Patternify就(jiù)是(shì)這(zhè)樣一個(gè)免費的(de)CSS模式生成器，内置了(le／liǎo)完整的(de)視覺編輯器。所有東西都可以(yǐ)在(zài)浏覽器上(shàng)進行管理，你所需要(yào / yāo)的(de)隻是(shì)網絡連接而(ér)已。

它的(de)模式設計接口不(bù)是(shì)很多，但是(shì)它卻是(shì)一個(gè)pixel-by-pixel生成器。因此，如果你想要(yào / yāo)一個(gè)噪音模式，你可能需要(yào / yāo)用其他(tā)一些工具。但是(shì)Patternify卻可以(yǐ)自動輸出(chū)圖像URL，并且爲(wéi / wèi)你提供base64代碼，你可以(yǐ)将其複制/剪切到(dào)你的(de)CSS中。

10、CSS Button Generator

我習慣把最好的(de)東西留在(zài)最後，這(zhè)個(gè)最好的(de)工具就(jiù)是(shì)CSS Button Generator。這(zhè)個(gè)工具可以(yǐ)給你提供大(dà)量的(de)自定義按鈕庫，以(yǐ)及CSS代碼，你可以(yǐ)用它們來(lái)搭建你需要(yào / yāo)的(de)東西。你也(yě)可以(yǐ)複制預置的(de)按鈕，對它們進行調整，并且儲存爲(wéi / wèi)模闆。當然你也(yě)可以(yǐ)從頭自己進行設計。它内置的(de)視覺編輯器非常出(chū)色，提供了(le／liǎo)很多自動以(yǐ)CSS屬性可供選擇。

後記

這(zhè)些免費的(de)工具都經過精挑細選的(de)，可以(yǐ)幫你完成各種代碼生成工作。其他(tā)的(de)一些工具也(yě)可以(yǐ)爲(wéi / wèi)你提供幫助，例如Saas mixins，但是(shì)我所推薦的(de)都是(shì)一些網頁應用，這(zhè)意味着你隻要(yào / yāo)有一台電腦，并且接入互聯網，就(jiù)可以(yǐ)随時(shí)使用這(zhè)些工具。在(zài)時(shí)間緊迫，自己的(de)電腦又不(bù)在(zài)手邊的(de)時(shí)候，這(zhè)些工具可以(yǐ)發揮巨大(dà)的(de)作用。