我钟爱的HTML5和CSS3在线工具

我真的喜欢上了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。

原文地址：http://weblogs.asp.net/dwahlin/archive/2011/11/17/a-few-of-my-favorite-html5-and-css3-online-tools.aspx