湯姆大叔的博客

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