威尼斯娱乐CSS3

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

2015/09/02 · CSS ·
CSS3,
代码生成工具

原文出处: Jake
Rocheleau   译文出处:开源中国社区   

新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。

但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全免费的
WebApp,这些 WebApp 能够为模板,渐变,甚至浏览器属性的前缀生成 CSS3
代码。如果你是前端开发者,这些资源可以帮助你节省很多时间,并可以为以后的项目提供可复用的源码。

1. CSS3 Generator

CSS3 Generator 是最受欢迎的用于代码生成的
web 应用之一。这个应用对于不同类型的代码生成有不同的页面,包括
RGBA,transform,Flexbox
等等各种类型。另外每种代码生成器都有一个图标来表示完全支持的浏览器版本。

威尼斯娱乐 1

2. Enjoy CSS

为了更加动态的应用而深入了解 Enjoy CSS
网站。这就意味着它是一个可以为需要定制输入框或 CSS3
按钮的生动的项目的多功能代码生成器。它为普通页面元素,例如 CSS3 Buttons
这样的页面提供转变和转换以及预构建元素的定制代码。

威尼斯娱乐 2

3. Patternify

除非你知道你使用的 Photoshop
很难从零开始制作一个模板。幸亏 Patternify 是一个免费的工具,这个工具可以生成任何你需要的无缝
CSS 模式。

背景是用 Base64 编码增加到 CSS
生成的。你可以使用原始像素绘制你自己的模式或者从以构建的模式列表中选择。尽管
Photoshop 肯定是一个很好的选择,但是如果你没有 PS
或其他图像设计软件的权限,Patternify 是一个最好的选择。

威尼斯娱乐 3

4. ColorZilla Gradients

CSS3 的渐变是在 CSS3
语言中最复杂的功能。他们是很容易编写的,但是代码量却是极其的冗长。ColorZilla
的渐变编辑器是一个免费的 CSS3 背景渐变生成器。

安装非常类似 Photoshop
或其他颜色选择器接口。你可以在一个渐变中设置多个不同颜色的断点。你也可以从 HEX
, HSL , RGBa 中选择输出选项。

威尼斯娱乐 4

5. CSSmatic

另一个免费的多功能WebApp是 CSSmatic。我叫它为“多功能”App是因为它生存4种不同的
CSS
特性:渐变,圆形边框,盒子阴影和噪音背景,网站上所有的功能都是完全免费的,并在未来很有可能添加更多的
CSS 特性。

威尼斯娱乐 5

6. CSS Type Set

当设计界面的时候很容易就忘记了对于任何网站来说的最重要的一个方面——排版。重新设置又得关注类型,但是有时你先希望它们能自己处理。CSS
Type
Set 可以通过实时预览文本属性准确的做到这点,并且你可以将
CSS 代码拷贝到自己的站点。

威尼斯娱乐 6

7. Prefixr

每个开发者都有这样的一个痛点,就是通过自定义前缀来适应所有的网页浏览器。幸运的是,这些标准已经执行了很长时间了并且不是所有的前缀都需要写,但是仍然很多。Prefixr 是一个免费的工具,可以更新你的
CSS 代码去包含所有需要的前缀属性。

威尼斯娱乐 7

8. Pleeease Play

这是 Prefixr 之外的另外一个选择,是另一款
CSS 前缀生成器,同时可以执行其他高级 CSS3
更新。最值得关注的是可以向后兼容 CSS3
透明度,过滤器,伪元素和其他效果的更新。此外,界面非常容易使用,对于想重复确认代码的开发者来说是非常有趣的选择。

威尼斯娱乐 8

9. CSS3 Button Generator

传统的按钮和输入元素总是限制于操作系统的默认样式。现在可以简单的自定义独特的按钮
—— 最大的问题是把你的设计从 Photoshop/Sketch 转换成 CSS3。

一旦你学会了所有 CSS
属性,一切都变得简单,但是你还需要编写很多的代码才能完成。CSS Button
Generator 是个免费的工具,可以帮你定制按钮的样式和标签文本。当你修改任何一个设置的时候会自动生成代码,然后更新。

威尼斯娱乐 9

10. Best CSS 按钮生成器威尼斯娱乐

Best CSS
按钮生成器可供生成按钮代码。这是一个完全免费使用的产品,它还有简单的接口。更棒的是你可以从预制的按钮中选择和使用那些作为你设计的模板。如果你是
Chrome
用户可以检验一下免费的浏览器扩展,它可以被用来访问外部的网站。

威尼斯娱乐 10

你越练习 CSS
它就会变得更简单。在你达到熟练程度的水平后,自动化就是一个很好地选择。

使用这些工具是需要的,它们可以尽力让前端开发成为你项目周期里最简单的部分。

1 赞 1 收藏
评论

威尼斯娱乐 11

发表评论

电子邮件地址不会被公开。 必填项已用*标注