轉載自：微信公眾號 qianduan1024 前端開發的同名文章

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

摘要：Web開發人員們總是在尋找可以幫助他們節省時間的捷徑。許多優秀的開發人員工具都能提供這些功能，相比於以往，現在完成網頁開發的速度已經提高了很多。

Web開發人員們總是在尋找可以幫助他們節省時間的捷徑。許多優秀的開發人員工具都能提供這些功能，相比於以往，現在完成網頁開發的速度已經提高了很多。隨著基於瀏覽器IDE的興起，Web開發已經不再拘泥於桌面型電腦之上，你可以在任何一臺計算機上編寫程式碼，甚至是在瀏覽器中對結果進行實時測試。 

免費的線上程式碼生成器幫你快速的完成網頁搭建和迭代。只要你確定自己需要那種程式碼，剩下的事情就只是找到合適的工具了。我們總結了10個最受歡迎的CSS程式碼生成工具，而且這些工具都可以供你免費試用。 

1、WAIT! Animate 

在CSS動畫之間建立自定義重複性暫停一直以來都是一件困難的事情。但是有了WAIT! Animate，你可以用它生成正確的程式碼，來實現這個目標。這是一個新出現的網頁應用，不久之前這個工具的製造者Will Stone剛剛將其推薦給我。

每一個人都明白CSS過渡和動畫延遲。但是這種延遲只會出現一次，那就是每次動畫開始的時候。

WAIT! Animate可以讓你在每次動畫重複的間隙設定一個自定義暫停，從而實現動畫的無限期迴圈。這是一個非常獨特的CSS程式碼生成器，它能夠讓你在無需重頭編寫程式碼的情況下打造動畫效果。

2、CSS3 Generator

CSS3 Generator是一個比較傳統的程式碼工具，但是你可以將它運用在每天的工作之中。這個網頁應用有著超過10種不同的程式碼生成器，例如CSS columns、box shadows，甚至還包括了更新的flexbox property。

可惜的是整個網頁應用都是動態應用，而且執行在一個單一的頁面之中。因此每一個獨立的生成器都沒有永久連結。但是它使用起來超級簡單，而且支援每一種主流瀏覽器。

在開啟主頁之後，你只需要選擇你要使用哪一種生成器，對變數進行一些調節，然後就可以複製程式碼了。可以說，它集合了所有最好的程式碼生成技巧。

3、ColorZilla Gradients

 自定義CSS漸變是一件讓人頭疼的事情。你可以使用Sass打造自己的mixin，效果也還可以。但是如果你不會使用Sass，或者只是需要一個簡單的視覺編輯器，那麼我推薦ColorZilla出品的Gradient Editor工具。

這是一個完全免費的工具，而且擁有類似Photoshop一樣的視覺編輯器，可以生成漸變程式碼。你可以通過在漸變箱中移動滑塊的方式來改變色彩位置，並且生成CSS程式碼。你也可以用它在漸變中新增或是移除顏色，並且改變方向。

4、CSS Type Set

你是否曾經想過實驗某種排版風格，看看它看上去是什麼樣？CSS Type Set就可以幫你完成這件事情。你只需要輸入一些文字，然後更新字型、字號、顏色、字間距和其他一些變數，一切就大功告成了。

所有內容都可以實時顯示，新的排版在網頁上的樣子一目瞭然的出現在你面前。這個工具目前唯一的缺點，就是支援的字型不夠多。你也可以使用Google Web Fonts配合Webfont Tester，但是它並沒有任何CSS輸出功能。

5、Enjoy CSS 

Enjoy CSS網頁應用既是一個程式碼生成器，也是一個視覺編輯器。你可以用它來建立各種網頁元素，例如按鈕、輸入框，同時給它們新增自定CSS3屬性。

你甚至可以用它來測試Adobe字型，並且給字型新增各種效果，來觀察它們在瀏覽器中的樣子。但是Enjoy CSS最好的功能則是gallery，裡面有著許多免費的程式碼段，和預設的按鍵、輸入框和其他元素的模板。

6、Flexy Boxes

如果你連flexbox最基本的概念都不理解，那麼你可以試試Flexy Boxes。裡面講述了每一版flexbox之間的區別，以及渲染引擎對句法的解釋。

由於flexbox還是一個較新的東西，因此還沒有太多的網頁利用了這個功能。但

是當你理解了它的工作原理之後，在開發專案的時候你就會輕鬆很多，並且為未來CSS flexbox佈局鋪平了道路。

7、CSSmatic 

CSSmatic也是一個涵蓋了多個生成器的網頁，它一共有四個獨立的部分：陰影、邊框半徑、噪音紋理和CSS漸變。相比於CSS3 Generator，這個網頁的選項較少，但是它為漸變生成器等工具提供了獨立的頁面URL。如果你只需要其中的一個工具，你可以將其獨立放進收藏夾中。

CSSmatic是少數幾個包括了噪音生成器的網頁之一。所有東西都是在本地生成，你可以從Thumbr中拷貝生成背景的縮圖，然後使用background-repeat和background-image屬性在CSS中重複。

8、Base64 CSS 

前端開發人員都在開始接受base64程式碼，因為相比於傳統影象，它有著易用性高、對儲存空間要求較小等有點。Base64 CSS是一個免費的程式碼生成器，可以輸出原始的base6影象程式碼。

你只需要將計算機中的檔案進行上傳，剩下的事情交給這個網站就可以了。使用這個應用，你可以增加網頁速度，並且減少頁面上的快取元素。

9、Patternify 

如果你不喜歡使用自己的背景影象，那麼為什麼不建立一個呢？Patternify就是這樣一個免費的CSS模式生成器，內建了完整的視覺編輯器。所有東西都可以在瀏覽器上進行管理，你所需要的只是網路連線而已。

它的模式設計介面不是很多，但是它卻是一個pixel-by-pixel生成器。因此，如果你想要一個噪音模式，你可能需要用其他一些工具。但是Patternify卻可以自動輸出影象URL，並且為你提供base64程式碼，你可以將其複製/剪下到你的CSS中。 

10、CSS Button Generator

我習慣把最好的東西留在最後，這個最好的工具就是CSS Button Generator。這個工具可以給你提供大量的自定義按鈕庫，以及CSS程式碼，你可以用它們來搭建你需要的東西。你也可以複製預置的按鈕，對它們進行調整，並且儲存為模板。當然你也可以從頭自己進行設計。它內建的視覺編輯器非常出色，提供了很多自動以CSS屬性可供選擇。 

後記 

這些免費的工具都經過精挑細選的，可以幫你完成各種程式碼生成工作。其他的一些工具也可以為你提供幫助，例如Saas mixins，但是我所推薦的都是一些網頁應用，這意味著你只要有一臺電腦，並且接入網際網路，就可以隨時使用這些工具。在時間緊迫，自己的電腦又不在手邊的時候，這些工具可以發揮巨大的作用。