10個頂級的CSS3程式碼生成器

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

新出來的線上工具和web應用允許開發人員快速建立網站，而無需手動一行一行地編寫程式碼。當前，不斷有新的框架和程式碼庫湧現在前端開發這個領域裡。

但是，這也讓許多開發人員忘記了程式碼生成器以及它們在構建網站時的作用。以下資源是完全免費的web應用，可用於生成圖案、漸變、甚至瀏覽器字首屬性的CSS3程式碼。如果你寫的是前端程式碼，然後這些資源可以為你節省大量的時間，併為今後的專案工作提供可重複片段。

1. CSS3 Generator

大家最喜愛的用於程式碼生成的web應用之一就是CSS3 Generator。對於不同類別的程式碼生成器，包括RGBa，transform，flexbox等等，它有不同的頁面。另外，每個程式碼生成器還包括用於解釋哪個瀏覽器版本完全支援該屬性的圖示。

官方網站：http://css3generator.com/

2.Enjoy CSS

想要更動態的應用程式，那麼試試Enjoy CSS網站。它意味著一個完整的程式碼生成器，可用於動態專案中自定義的輸入域或CSS3按鈕。它可提供定製的程式碼，用於轉換和過渡，並預建項，如CSS3按鈕這樣常見的頁面元素。

官方網站：http://enjoycss.com/

3. Patternify

除非你已經學習過Photoshop，否則再從頭開始學的話，難免會成為你一個很大的難點。值得慶幸的是，Patternify是一個免費工具，可生成你平鋪CSS模式所需要的一切。

使用Base64程式碼新增到CSS時會生成背景。你可以用原始的畫素資料繪製自己的模型，甚至從一堆預設的模式中進行選擇。 Photoshop毫無疑問是一個更好的選擇，但Patternify也不錯，如果你沒有學過PS或其他圖形設計程式的話。

官方網站：http://www.patternify.com/

4. ColorZilla Gradients

CSS3漸變是語言中最複雜的功能之一。很容易導致程式碼變得出奇地冗長。 ColorZilla的漸變編輯器是一個免費的用於CSS3背景漸變的生成器。

該設定非常類似Photoshop或其他的顏色選擇器介面。你可以在同一個漸變中對大量的顏色設定多個斷點，也可以從HEX或HSL或RGBa程式碼中選擇輸出選項。

官方網站：http://www.colorzilla.com/gradient-editor/

5. CSSmatic

另一種免費的多功能web應用程式是CSSmatic。我之所以稱之為“多功能”的應用程式，是因為它可以生成4個不同的CSS屬性：漸變、圓角邊框、圓角和框投影以及BG噪音。整個網站完全免費，並且有望在將來增加更多的功能。

官方網站：http://www.cssmatic.com/

6. CSS Type Set

當我們投入到設計時，很容易忘記排版，但這卻是任何網頁最重要方面之一。Resets是挺不錯的，但有時我們總希望能夠自動化程式。CSS Type Set通過實時預覽文字，並提供CSS程式碼複製到自己的網站，以實現這個目標。

官方網站：http://csstypeset.com/

7. Prefixr

每個開發人員都飽受編寫自定義字首來處理所有web瀏覽器的痛苦。值得慶幸的是，標準已經經過漫長的進展，現在並非所有的字首都需要新增——但許多仍然需要。Prefixr是一個免費更新CSS程式碼以包括所有必需字首屬性的工具。

官方網站：http://prefixr.com/

8. Pleeease Play

Prefixr的另一個選擇是Pleeease Play web應用。這是另一個CSS字首生成器，它也可以執行其他高階的CSS3更新。最值得注意的是，你會發現在其他整潔效果中，它向後相容更新CSS3不透明度，過濾器和偽元素。再加上介面超級好用，因此成為了開發人員再次檢查程式碼的好助手。

官方網站：http://pleeease.io/play/

9. CSS3 Button Generator

傳統按鈕和輸入元素總是受限於作業系統的預設樣式。現在比以往任何時候都更容易定製獨特的按鈕——最大的問題是將你的設計從Photoshop /草圖翻譯到CSS3。

一旦你學會所有的CSS屬性，這就會變得容易起來，但你仍然需要寫很多行程式碼。CSS Button Generator是用於自定義按鈕樣式和標籤文字的免費工具。只要修改設定，就能自動生成和更新程式碼。

官方網站：http://css3buttongenerator.com/

10.Best CSS Button Generator

對於按鈕程式碼，還有一種方法是Best CSS Button Generator。這也是完全免費的，並且介面簡單。最重要的，你可以從預設的按鈕中選擇並使用模板用於自己的設計。如果你是一個Chrome瀏覽器使用者，那麼也可以從網站的外部訪問此款免費的瀏覽器擴充套件。

官方網站：http://www.bestcssbuttongenerator.com/

CSS練習得越多，你會發現它越簡單。但是，在某些時候，當你達到精通水平的時候，自動化確實有其可取之處。

歡迎發表你的看法。