推荐 10 个超棒的 CSS3 代码生成工具

新的在线工具和 WebApp 帮助开发者快速地建立网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。 可是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是彻底免费的 WebApp，这些 WebApp 可以为模板，渐变，甚至浏览器属性的前缀生成 CSS3 代码。若是你是前端开发者，这些资源能够帮助你节省不少时间，并能够为之后的项目提供可复用的源码。

1. CSS3 Generator CSS3 Generator 是最受欢迎的用于代码生成的 web 应用之一。这个应用对于不一样类型的代码生成有不一样的页面，包括 RGBA，transform，Flexbox 等等各类类型。另外每种代码生成器都有一个图标来表示彻底支持的浏览器版本。 2. Enjoy CSS 为了更加动态的应用而深刻了解 Enjoy CSS 网站。这就意味着它是一个能够为须要定制输入框或 CSS3 按钮的生动的项目的多功能代码生成器。它为普通页面元素，例如 CSS3 Buttons 这样的页面提供转变和转换以及预构建元素的定制代码。

顶 翻译的不错哦!

3. Patternify 除非你知道你使用的 Photoshop 很难从零开始制做一个模板。幸好 Patternify 是一个免费的工具，这个工具能够生成任何你须要的无缝 CSS 模式。 背景是用 Base64 编码增长到 CSS 生成的。你可使用原始像素绘制你本身的模式或者从以构建的模式列表中选择。尽管 Photoshop 确定是一个很好的选择，可是若是你没有 PS 或其余图像设计软件的权限，Patternify 是一个最好的选择。 4. ColorZilla Gradients CSS3 的渐变是在 CSS3 语言中最复杂的功能。他们是很容易编写的，可是代码量倒是极其的冗长。ColorZilla 的渐变编辑器是一个免费的 CSS3 背景渐变生成器。 安装很是相似 Photoshop 或其余颜色选择器接口。你能够在一个渐变中设置多个不一样颜色的断点。你也能够从 HEX ， HSL ， RGBa 中选择输出选项。

Robbie_Zhu 翻译于 1年前 1人顶   顶 翻译的不错哦!

5. CSSmatic 另外一个免费的多功能WebApp是 CSSmatic。我叫它为“多功能”App是由于它生存4种不一样的 CSS 特性：渐变，圆形边框，盒子阴影和噪音背景，网站上全部的功能都是彻底免费的，并在将来颇有可能添加更多的 CSS 特性。 6. CSS Type Set 当设计界面的时候很容易就忘记了对于任何网站来讲的最重要的一个方面——排版。从新设置又得关注类型，可是有时你先但愿它们能本身处理。CSS Type Set 能够经过实时预览文本属性准确的作到这点，而且你能够将 CSS 代码拷贝到本身的站点。 7. Prefixr 每一个开发者都有这样的一个痛点，就是经过自定义前缀来适应全部的网页浏览器。幸运的是，这些标准已经执行了很长时间了而且不是全部的前缀都须要写，可是仍然不少。Prefixr 是一个免费的工具，能够更新你的 CSS 代码去包含全部须要的前缀属性。

Robbie_Zhu 翻译于 1年前 1人顶   顶 翻译的不错哦!

8. Pleeease Play 这是 Prefixr 以外的另一个选择，是另外一款 CSS 前缀生成器，同时能够执行其余高级 CSS3 更新。最值得关注的是能够向后兼容 CSS3 透明度，过滤器，伪元素和其余效果的更新。此外，界面很是容易使用，对于想重复确认代码的开发者来讲是很是有趣的选择。 9. CSS3 Button Generator 传统的按钮和输入元素老是限制于操做系统的默认样式。如今能够简单的自定义独特的按钮 —— 最大的问题是把你的设计从 Photoshop/Sketch 转换成 CSS3。 一旦你学会了全部 CSS 属性，一切都变得简单，可是你还须要编写不少的代码才能完成。CSS Button Generator 是个免费的工具，能够帮你定制按钮的样式和标签文本。当你修改任何一个设置的时候会自动生成代码，而后更新。	叶秀兰 翻译于 1年前 2人顶   顶 翻译的不错哦!
	其它翻译版本(1)

10. Best CSS 按钮生成器 Best CSS 按钮生成器可供生成按钮代码。这是一个彻底无偿使用的产品，它还有简单的接口。更棒的是你能够从预制的按钮中选择和使用那些做为你设计的模板。若是你是 Chrome 用户能够检验一下免费的浏览器扩展，它能够被用来访问外部的网站。 你越练习 CSS 它就会变得更简单。在你达到熟练程度的水平后，自动化就是一个很好地选择。 使用这些工具是须要的，它们能够尽力让前端开发成为你项目周期里最简单的部分。