我真的喜欢上了 HTML5, CSS3, JavaScript 编程,但是有一些代码还是需要一些辅助工具来做才行。
例如,CSS3 的 Gradient 渐变如果手写代码的话真的不爽,还有像 animation 动画, transform 转变或者是需要矢量扩展的 style 代码都是很复杂的。
网上有很多非常流行的在线工具可以很简单地生成 HTML5/CSS3 代码,能够提高我们的开发速度。下面列举一些我钟爱的工具。
HTML5 Boilerplate
HTML5 Boilerplate 提供了一种很牛逼的方式来让我们创建 HTML5 站点初始代码。它包括了很多最佳实践,甚至一些很多人都不知道的技巧。自定义的下载功能可以让你只选择你想要的功能代码来生成文件。点此访问更多信息。

Initializr
尽管 HTML5 Boilerplate 提供了很牛逼的方式给我们用于创建站点,但它的主要功能是让我们创建该站点的初始基本结构 (命名一个 HTML 页面,JavaScript 文件引用,CSS 样式表) 但是他不提供给页面更多的内容。Initializer 是构建在 HTML5 Boilerplate 之上的,然后提供一个初始化页面来达到你的基本需求。也提供了自定义的选项让你包含 / 去除相应的 HTML5 新功能。

CSS3 Maker
CSS3 提供了一系列的新特性(从渐变到圆角等)。虽然很多新特性的语法都很简单,但是像渐变,动画以及自定义矢量扩展的样式还是很复杂的,尤其是要兼容多浏览器。你可以手工写,但是 CSS3 Maker 可以提供一种很直观的方式帮你生成 CSS3 样式。为啥不用呢?

CSS3, Please!
CSS3, Please! 是一个可以快速简单生成兼容多浏览器的 CSS3 代码生成工具。所有与 CSS3 相关的东西都可以通过简单方面且直观的方式去生成。


Ultimate CSS Gradient Generator
CSS3 Maker(上面的)是一个渐变 CSS3 代码的生成工具,但是关于渐变代码的生成工具,我的最爱却是 Ultimate CSS Gradient Generator。如果你用 Photoshop 做过渐变效果,那你会喜欢这个工具,因为它提供超级简单的步骤(以及多种不同的 GradientStop)来让你创建 CSS3 代码。

@font-face 字体
尽管 @font-face 已经支持一段时间了,我觉得字体很不错,并且希望有一个战队提供各种各样的字体。以前,如果用户端你使用的字体,那页面显示就正常,如果没有,那页面可能就面目全非了。新的特性允许你通过在 CSS 里声明 @font-face,并把相应的字体存放在服务器端,然后就可以正常展示你的页面了,多酷!我比较喜欢的是:Font Squirrel。

HTML5 & CSS3 支持和测试
如果想知道某个特定浏览器支持哪些 HTML5 and CSS3 特性,以及该浏览器支持多少个 HTML5/CSS3 特性,点击 HTML5 & CSS3 Support 页面或者 HTML5 Test 页面即可得知。


CSS3 Easing Animation Tool
CSS3 动画还没有被所有的浏览器广泛的支持(我目前还没怎么用),但是这些浏览器厂商承诺会支持这些特性。但是创建动画缓冲(animation easing) 确实是很大的挑战,幸运的是你可以使用 CSS Easing Animation Tool 很简单地处理和控制你的每个动画缓冲,相当方便。

网上还有其它的一些在线处理工具,但是上述工具是我最喜欢且常用的,如果你还知道其它的 HTML5 或 CSS3 的好用工具,Please let me know。