【翻译】我钟爱的HTML5和CSS3在线工具
2012-02-01 06:42
381 查看
======================================================
注:本文源代码点此下载
======================================================
我真的喜欢上了html5, css3, javascript编程,但是有一些代码还是需要一些辅助工具来做才行,例如,css3的gradient渐变如果手写代码的话真的不爽,还有像animation动画,transform转变或者是需要矢量扩展的style代码都是很复杂的。网上有很多非常流行的在线工具可以很简单地生成html5/css3代码,能够提高我们的开发速度。下面列举一些我钟爱的工具。
html5 boilerplate
html5 boilerplate提供了一种很牛逼的方式来让我们创建html5站点初始代码。它包括了很多最佳实践,甚至一些很多人都不知道的技巧。自定义的下载功能可以让你只选择你想要的功能代码来生成文件。点此访问更多信息。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016060694.png)
initializr
尽管html5 boilerplate提供了很牛逼的方式给我们用于创建站点,但它的主要功能是让我们创建该站点的初始基本结构(命名一个html页面,javascript文件引用,css 样式表) 但是他不提供给页面更多的内容。initializer是构建在html5 boilerplate之上的,然后提供一个初始化页面来达到你的基本需求。也提供了自定义的选项让你包含/去除相应的html5新功能。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016062445.png)
css3 maker
css3提供了一系列的新特性(从渐变到圆角等)。虽然很多新特性的语法都很简单,但是像渐变,动画以及自定义矢量扩展的样式还是很复杂的,尤其是要兼容多浏览器。你可以手工写,但是css3 maker可以提供一种很直观的方式帮你生成css3样式。为啥不用呢?
![](http://pic002.cnblogs.com/images/2011/349491/2011112016064237.png)
css3, please!
css3, please!是一个可以快速简单生成兼容多浏览器的css3代码生成工具。所有与css3相关的东西都可以通过简单方面且直观的方式去生成。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016065682.png)
![](http://pic002.cnblogs.com/images/2011/349491/2011112016071219.png)
ultimate css gradient generator
css3 maker(上面的)是一个渐变css3代码的生成工具,但是关于渐变代码的生成工具,我的最爱却是ultimate css gradient generator。如果你用photoshop做过渐变效果,那你会喜欢这个工具,因为它提供超级简单的步骤(以及多种不同的gradientstop)来让你创建css3代码。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016072830.png)
@font-face字体
尽管@font-face已经支持一段时间了,我觉得字体很不错,并且希望有一个战队提供各种各样的字体。以前,如果用户端你使用的字体,那页面显示就正常,如果没有,那页面可能就面目全非了。新的特性允许你通过在css里声明@font-face,并把相应的字体存放在服务器端,然后就可以正常展示你的页面了,多酷!我比较喜欢的是:font
squirrel。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016074968.png)
html5 & css3支持和测试
如果想知道某个特定浏览器支持哪些html5 and css3特性,以及该浏览器支持多少个html5/css3特性,点击
html5 & css3 support 页面或者html5 test页面即可得知。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016080562.png)
![](http://pic002.cnblogs.com/images/2011/349491/2011112016082135.png)
css3 easing animation tool
css3动画还没有被所有的浏览器广泛的支持(我目前还没怎么用),但是这些浏览器厂商承诺会支持这些特性。但是创建动画缓冲(animation easing)确实是很大的挑战,幸运的是你可以使用css easing animation tool很简单地处理和控制你的每个动画缓冲,相当方便。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016085810.png)
网上还有其它的一些在线处理工具,但是上述工具是我最喜欢且常用的,如果你还知道其它的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
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定
这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
注:本文源代码点此下载
======================================================
我真的喜欢上了html5, css3, javascript编程,但是有一些代码还是需要一些辅助工具来做才行,例如,css3的gradient渐变如果手写代码的话真的不爽,还有像animation动画,transform转变或者是需要矢量扩展的style代码都是很复杂的。网上有很多非常流行的在线工具可以很简单地生成html5/css3代码,能够提高我们的开发速度。下面列举一些我钟爱的工具。
html5 boilerplate
html5 boilerplate提供了一种很牛逼的方式来让我们创建html5站点初始代码。它包括了很多最佳实践,甚至一些很多人都不知道的技巧。自定义的下载功能可以让你只选择你想要的功能代码来生成文件。点此访问更多信息。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016060694.png)
initializr
尽管html5 boilerplate提供了很牛逼的方式给我们用于创建站点,但它的主要功能是让我们创建该站点的初始基本结构(命名一个html页面,javascript文件引用,css 样式表) 但是他不提供给页面更多的内容。initializer是构建在html5 boilerplate之上的,然后提供一个初始化页面来达到你的基本需求。也提供了自定义的选项让你包含/去除相应的html5新功能。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016062445.png)
css3 maker
css3提供了一系列的新特性(从渐变到圆角等)。虽然很多新特性的语法都很简单,但是像渐变,动画以及自定义矢量扩展的样式还是很复杂的,尤其是要兼容多浏览器。你可以手工写,但是css3 maker可以提供一种很直观的方式帮你生成css3样式。为啥不用呢?
![](http://pic002.cnblogs.com/images/2011/349491/2011112016064237.png)
css3, please!
css3, please!是一个可以快速简单生成兼容多浏览器的css3代码生成工具。所有与css3相关的东西都可以通过简单方面且直观的方式去生成。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016065682.png)
![](http://pic002.cnblogs.com/images/2011/349491/2011112016071219.png)
ultimate css gradient generator
css3 maker(上面的)是一个渐变css3代码的生成工具,但是关于渐变代码的生成工具,我的最爱却是ultimate css gradient generator。如果你用photoshop做过渐变效果,那你会喜欢这个工具,因为它提供超级简单的步骤(以及多种不同的gradientstop)来让你创建css3代码。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016072830.png)
@font-face字体
尽管@font-face已经支持一段时间了,我觉得字体很不错,并且希望有一个战队提供各种各样的字体。以前,如果用户端你使用的字体,那页面显示就正常,如果没有,那页面可能就面目全非了。新的特性允许你通过在css里声明@font-face,并把相应的字体存放在服务器端,然后就可以正常展示你的页面了,多酷!我比较喜欢的是:font
squirrel。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016074968.png)
html5 & css3支持和测试
如果想知道某个特定浏览器支持哪些html5 and css3特性,以及该浏览器支持多少个html5/css3特性,点击
html5 & css3 support 页面或者html5 test页面即可得知。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016080562.png)
![](http://pic002.cnblogs.com/images/2011/349491/2011112016082135.png)
css3 easing animation tool
css3动画还没有被所有的浏览器广泛的支持(我目前还没怎么用),但是这些浏览器厂商承诺会支持这些特性。但是创建动画缓冲(animation easing)确实是很大的挑战,幸运的是你可以使用css easing animation tool很简单地处理和控制你的每个动画缓冲,相当方便。
![](http://pic002.cnblogs.com/images/2011/349491/2011112016085810.png)
网上还有其它的一些在线处理工具,但是上述工具是我最喜欢且常用的,如果你还知道其它的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
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定
这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
相关文章推荐
- 【翻译】我钟爱的HTML5和CSS3在线工具
- 我钟爱的HTML5和CSS3在线工具
- 我钟爱的HTML5和CSS3在线工具
- HTML5--CSS3在线编辑工具 超酷!!!(24款非常实用的CSS3工具终极收藏)
- 在线制作滑动开关css3国外工具
- 超酷的CSS3列表动画特效在线生成工具 - liffect
- 【转】在线翻译、词典、离线工具大全
- HTML5 canvas 在线画笔绘图工具(一)
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
- 利用HTTP的POST方法做个在线翻译的小工具
- 10个为设计者准备的HTML5在线工具
- ASP.NET5 REST API使用示例——基于云平台+云服务打造自己的在线翻译工具
- 20个 css3 html5 设计工具
- 超酷的CSS3列表动画特效在线生成工具 - liffect
- 推荐十款非常优秀的 HTML5 在线设计工具
- 【HTML5与CSS3基础】开发者工具之Console
- 【转】在线翻译、词典、离线工具大全
- Html5系列(十二)canvas-js贝塞尔曲线代码在线生成工具
- HTML5 canvas 在线画笔绘图工具(二)
- HTML5 canvas 在线画笔绘图工具(二)