英文原文：Top Free CSS3 Code Generators
譯者：祝青, 無若, 葉秀蘭
原文地址：http://www.oschina.net/translate/free-css3-generators
新的在線工具和 WebApp 幫助開發(fā)者快速地創(chuàng)建網(wǎng)站而不用寫代碼很魂。前端開發(fā)已經(jīng)在框架和代碼庫方面有了很大的進展平斩。
但是許多開發(fā)者已經(jīng)忘記了代碼生成器在構(gòu)建網(wǎng)站時的價值。下面的資源是完全免費的 WebApp，這些 WebApp 能夠為模板荐糜，漸變，甚至瀏覽器屬性的前綴生成 CSS3 代碼肝断。如果你是前端開發(fā)者迂尝，這些資源可以幫助你節(jié)省很多時間，并可以為以后的項目提供可復用的源碼茂蚓。
CSS3 Generator 是最受歡迎的用于代碼生成的 web 應(yīng)用之一壕鹉。這個應(yīng)用對于不同類型的代碼生成有不同的頁面，包括 RGBA聋涨，transform晾浴，F(xiàn)lexbox 等等各種類型。另外每種代碼生成器都有一個圖標來表示完全支持的瀏覽器版本牍白。
為了更加動態(tài)的應(yīng)用而深入了解 Enjoy CSS 網(wǎng)站怠肋。這就意味著它是一個可以為需要定制輸入框或 CSS3 按鈕的生動的項目的多功能代碼生成器。它為普通頁面元素淹朋，例如 CSS3 Buttons 這樣的頁面提供轉(zhuǎn)變和轉(zhuǎn)換以及預構(gòu)建元素的定制代碼笙各。
除非你知道你使用的 Photoshop 很難從零開始制作一個模板。幸虧 Patternify 是一個免費的工具础芍，這個工具可以生成任何你需要的無縫 CSS 模式杈抢。
背景是用 Base64 編碼增加到 CSS 生成的。你可以使用原始像素繪制你自己的模式或者從以構(gòu)建的模式列表中選擇仑性。盡管 Photoshop 肯定是一個很好的選擇惶楼，但是如果你沒有 PS 或其他圖像設(shè)計軟件的權(quán)限，Patternify 是一個最好的選擇。
CSS3 的漸變是在 CSS3 語言中最復雜的功能歼捐。他們是很容易編寫的何陆，但是代碼量卻是極其的冗長。ColorZilla 的漸變編輯器是一個免費的 CSS3 背景漸變生成器豹储。
安裝非常類似 Photoshop 或其他顏色選擇器接口贷盲。你可以在一個漸變中設(shè)置多個不同顏色的斷點。你也可以從 HEX剥扣，HSL巩剖，RGBa 中選擇輸出選項。
5.CSSmatic
另一個免費的多功能WebApp是 CSSmatic钠怯。我叫它為“多功能”App是因為它生存4種不同的 CSS 特性：漸變佳魔，圓形邊框，盒子陰影和噪音背景晦炊，網(wǎng)站上所有的功能都是完全免費的鞠鲜，并在未來很有可能添加更多的 CSS 特性。
當設(shè)計界面的時候很容易就忘記了對于任何網(wǎng)站來說的最重要的一個方面——排版断国。重新設(shè)置又得關(guān)注類型贤姆，但是有時你先希望它們能自己處理。CSS Type Set 可以通過實時預覽文本屬性準確的做到這點并思，并且你可以將 CSS 代碼拷貝到自己的站點庐氮。
7.Prefixr
每個開發(fā)者都有這樣的一個痛點，就是通過自定義前綴來適應(yīng)所有的網(wǎng)頁瀏覽器宋彼。幸運的是弄砍，這些標準已經(jīng)執(zhí)行了很長時間了并且不是所有的前綴都需要寫，但是仍然很多输涕。Prefixr 是一個免費的工具音婶，可以更新你的 CSS 代碼去包含所有需要的前綴屬性靠欢。
這是 Prefixr 之外的另外一個選擇得滤，是另一款 CSS 前綴生成器，同時可以執(zhí)行其他高級 CSS3 更新渤愁。最值得關(guān)注的是可以向后兼容 CSS3 透明度檐什，過濾器碴卧，偽元素和其他效果的更新。此外乃正，界面非常容易使用住册，對于想重復確認代碼的開發(fā)者來說是非常有趣的選擇。
傳統(tǒng)的按鈕和輸入元素總是限制于操作系統(tǒng)的默認樣式∥途撸現(xiàn)在可以簡單的自定義獨特的按鈕 —— 最大的問題是把你的設(shè)計從 Photoshop/Sketch 轉(zhuǎn)換成 CSS3荧飞。
一旦你學會了所有 CSS 屬性凡人，一切都變得簡單，但是你還需要編寫很多的代碼才能完成叹阔。CSS Button Generator 是個免費的工具挠轴，可以幫你定制按鈕的樣式和標簽文本。當你修改任何一個設(shè)置的時候會自動生成代碼耳幢，然后更新岸晦。
Best CSS 按鈕生成器可供生成按鈕代碼。這是一個完全免費使用的產(chǎn)品帅掘，它還有簡單的接口委煤。更棒的是你可以從預制的按鈕中選擇和使用那些作為你設(shè)計的模板堂油。如果你是 Chrome 用戶可以檢驗一下免費的瀏覽器擴展修档，它可以被用來訪問外部的網(wǎng)站。
你越練習 CSS 它就會變得更簡單府框。在你達到熟練程度的水平后吱窝，自動化就是一個很好地選擇。使用這些工具是需要的迫靖，它們可以盡力讓前端開發(fā)成為你項目周期里最簡單的部分院峡。
