今天的資源是完全免費(fèi)的 WebApp，這些 WebApp 能夠?yàn)槟０澹瑵u變，甚至瀏覽器屬性的前綴生成 CSS3 代碼。如果你是前端開(kāi)發(fā)者，這些資源可以幫助你節(jié)省很多時(shí)間，并可以為以后的項(xiàng)目提供可復(fù)用的源碼。

1.?CSS3 Generator

CSS3 Generator?是最受歡迎的用于代碼生成的 web 應(yīng)用之一。這個(gè)應(yīng)用對(duì)于不同類型的代碼生成有不同的頁(yè)面，包括 RGBA，transform，F(xiàn)lexbox 等等各種類型。另外每種代碼生成器都有一個(gè)圖標(biāo)來(lái)表示完全支持的瀏覽器版本。

2.?Enjoy CSS

它是一個(gè)可以為需要定制輸入框或 CSS3 按鈕的生動(dòng)的項(xiàng)目的多功能代碼生成器。它為普通頁(yè)面元素，例如 CSS3 Buttons 這樣的頁(yè)面提供轉(zhuǎn)變和轉(zhuǎn)換以及預(yù)構(gòu)建元素的定制代碼。

3.?Patternify

Patternify?是一個(gè)免費(fèi)的工具，這個(gè)工具可以生成任何你需要的無(wú)縫 CSS 模式。

背景是用 Base64 編碼增加到 CSS 生成的。你可以使用原始像素繪制你自己的模式或者從以構(gòu)建的模式列表中選擇。盡管 Photoshop 肯定是一個(gè)很好的選擇，但是如果你沒(méi)有 PS 或其他圖像設(shè)計(jì)軟件的權(quán)限，Patternify 是一個(gè)最好的選擇。

4.?ColorZilla Gradients

CSS3 的漸變是在 CSS3 語(yǔ)言中最復(fù)雜的功能。他們是很容易編寫(xiě)，但是代碼量卻是極其的冗長(zhǎng)。ColorZilla 的漸變編輯器是一個(gè)免費(fèi)的 CSS3 背景漸變生成器。

安裝類似 Photoshop 或其他顏色選擇器接口。你可以在一個(gè)漸變中設(shè)置多個(gè)不同顏色的斷點(diǎn)。你也可以從?HEX，HSL，RGBa 中選擇輸出選項(xiàng)。

5.?CSSmatic

另一個(gè)免費(fèi)的多功能WebApp是?CSSmatic。我叫它為“多功能”App是因?yàn)樗?種不同的 CSS 特性：漸變，圓形邊框，盒子陰影和噪音背景，網(wǎng)站上所有的功能都是完全免費(fèi)的，并在未來(lái)很有可能添加更多的 CSS 特性。

6.?CSS Type Set

設(shè)計(jì)界面的時(shí)候很容易忘了對(duì)于任何網(wǎng)站來(lái)說(shuō)最重要的一個(gè)方面——排版。重新設(shè)置又得關(guān)注類型，但是有時(shí)你先希望它們能自己處理。CSS Type Set?可以通過(guò)實(shí)時(shí)預(yù)覽文本屬性準(zhǔn)確的做到這點(diǎn)，并且你可以將 CSS 代碼拷貝到自己的站點(diǎn)。

7.?Prefixr

每個(gè)開(kāi)發(fā)者都有這樣的一個(gè)痛點(diǎn)，就是通過(guò)自定義前綴來(lái)適應(yīng)所有的網(wǎng)頁(yè)瀏覽器。幸運(yùn)的是，這些標(biāo)準(zhǔn)已經(jīng)執(zhí)行了很長(zhǎng)時(shí)間了并且不是所有的前綴都需要寫(xiě)，但是仍然很多。Prefixr?是一個(gè)免費(fèi)的工具，可以更新你的 CSS 代碼去包含所有需要的前綴屬性。

8.?Pleeease Play

這是?Prefixr?之外的另外一個(gè)選擇，是另一款 CSS 前綴生成器，同時(shí)可以執(zhí)行其他高級(jí) CSS3 更新。最值得關(guān)注的是可以向后兼容 CSS3 透明度，過(guò)濾器，偽元素和其他效果的更新。此外，界面非常容易使用，對(duì)于想重復(fù)確認(rèn)代碼的開(kāi)發(fā)者來(lái)說(shuō)是非常有趣的選擇。

9.?CSS3 Button Generator

傳統(tǒng)的按鈕和輸入元素總是限制于操作系統(tǒng)的默認(rèn)樣式。現(xiàn)在可以簡(jiǎn)單自定義獨(dú)特的按鈕 —— 最大的問(wèn)題是把你的設(shè)計(jì)從 Photoshop/Sketch 轉(zhuǎn)換成 CSS3。

一旦你學(xué)會(huì)了所有 CSS 屬性，一切都變得簡(jiǎn)單，但是你還需要編寫(xiě)很多的代碼才能完成。CSS Button Generator?是個(gè)免費(fèi)的工具，可以幫你定制按鈕的樣式和標(biāo)簽文本。當(dāng)你修改任何一個(gè)設(shè)置的時(shí)候會(huì)自動(dòng)生成代碼，然后更新。

10.?Best CSS 按鈕生成器

Best CSS 按鈕生成器可供生成按鈕代碼。這是一個(gè)完全免費(fèi)使用的產(chǎn)品，它還有簡(jiǎn)單的接口。更棒的是你可以從預(yù)制的按鈕中選擇和使用那些作為你設(shè)計(jì)的模板。如果你是 Chrome 用戶可以檢驗(yàn)一下免費(fèi)的瀏覽器擴(kuò)展，它可以被用來(lái)訪問(wèn)外部的網(wǎng)站。

你越練習(xí) CSS 它就會(huì)變得更簡(jiǎn)單。在你達(dá)到熟練程度的水平后，自動(dòng)化就是一個(gè)很好地選擇。

使用這些工具是需要的，它們可以盡力讓前端開(kāi)發(fā)成為你項(xiàng)目周期里最簡(jiǎn)單的部分。

設(shè)計(jì)師進(jìn)階好文推薦！

騰訊設(shè)計(jì)師的進(jìn)階建議，超實(shí)用！
《17條經(jīng)驗(yàn)之談！視覺(jué)設(shè)計(jì)師如何進(jìn)階提升自己能力》

想過(guò)稿就得先了解下設(shè)計(jì)評(píng)審！
《說(shuō)到心坎了！關(guān)于設(shè)計(jì)評(píng)審的一些思考》

提高效率才有時(shí)間進(jìn)步呀！
《秒變?cè)O(shè)計(jì)快刀手！10個(gè)幫設(shè)計(jì)師提高效率的經(jīng)驗(yàn)分享》

原文地址：webdesignledger
譯文地址：oschina
譯者：祝青

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量100萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com