推荐十款非常优秀的 HTML5 在线设计工具

时间:2022-11-06 05:10:55

网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品。随着 HTML5 技术的不断成熟,网络上涌现出越来越多的优秀 HTML5 应用,一起看看下面这些很棒的工具。

一、Online  Sprite Box Tool


地址:http://www.spritebox.net/

这款在线的 CSS Sprite 样式生成工具,结合jQuery、CSS3和HTML5开发,能够帮助你快速的生成CSS Sprite 样式。

推荐十款非常优秀的 HTML5 在线设计工具

二、Online Pattern Generator Tool


地址:http://patternizer.com/


这是一款在线纹理生成工具,当设计师需要制作网页背景的时候,它能够帮上大忙。这款工具提供了很多的配置选项,使用非常简单,太棒了!

推荐十款非常优秀的 HTML5 在线设计工具

三、Online 3D Sketch Tool


地址:http://hakim.se/experiments/html5/sketch/


这是一款很特别的绘图工具,使用功能强大的 HTML5 Canvas 来实现3D绘图功能。向让画布进行立体选择,你需要按住空格键并水平拖动鼠标,非常酷!

推荐十款非常优秀的 HTML5 在线设计工具

四、Online Font Testing Tool


地址:http://fontdragr.com/


对于设计师来说,选择一款合适的字体是一个艰难的过程。这款非常棒的字体测试工具可以帮助设计师即时浏览新字体在页面中的现实效果,不要修改任何的HTML或者CSS代码,只需要把字体文件拖放的顶部的工具栏中,新字体就会出现在下拉列表中。

推荐十款非常优秀的 HTML5 在线设计工具

五、Online Velocity Sketch Tool


地址:http://jayweeks.com/sketchy-structures-html5-canvas/

这是一款基于HTML5的在线素描工具,能在在线绘制一些奇特的东西,图片显示的就是我随手画的,我相信设计师们能够画出更加有创意的东西。

推荐十款非常优秀的 HTML5 在线设计工具

六、Online XRay Tool


地址:http://westciv.com/xray/


通过这款工具,你可以查看到任何页面上的元素细节, 类似于Firebug的元素查看工具,不过这个是在线的,不需要安装插件,只需要把它们网站上的一个书签项放到书签栏,使用的时候点击该书签,然后再点击需要查看的元素就可以了。

推荐十款非常优秀的 HTML5 在线设计工具

七、Online Automatoon (animation) Tool


地址:http://www.automatoon.com/


Automatoon 是一款完全基于HTML5开发的在线工作制作工具,完全没有使用Flash,制作的动画能运行于 iPhones、iPad、Android设备以及各种常见浏览器。

推荐十款非常优秀的 HTML5 在线设计工具

八、Online HTML5 Audio Maker Tool


地址:http://westciv.com/tools/audio/


随着HTML5发展,会有越来越多的HTML5网站开始使用强大的HTML5 audio标签功能。这个在线 audio 生成工具能够帮助你了解HTML5 audio提供的各种新特性,还有一款类似的在线 HTML5 video 制作工具 。

推荐十款非常优秀的 HTML5 在线设计工具

九、Online SVG to HTML5 Canvas Tool


地址:http://www.professorcloud.com/svg-to-canvas/


所有的矢量艺术包(Illustrator、Inkscape 等等) 都能够导出为 SVG (可缩放矢量图形),而这款工具帮助帮助你把SVG文件转换成HTML5 canvas。

推荐十款非常优秀的 HTML5 在线设计工具

十、Chrome Ajax Animator Tool


地址:https://chrome.google.com/webstore/detail/ginffkjapdobanedcblllenliboglpkp


这是一个跨平台的动画工具,在线和离线都能使用。你只需要安装有Chrome浏览器,然后通过快速指导教程引导入门,是一款对HTML5 动画初学者非常有用的工具。

推荐十款非常优秀的 HTML5 在线设计工具


PS:在此,再跟大家分享一些比较实用的工具:


代码对比/归并: http://www.matools.com/compare

正则表达式: http://www.matools.com/regex

js/css压缩: http://www.matools.com/compress

网页调色板: http://www.matools.com/color

crontab表达式: http://www.matools.com/crontab

时间戳转换: http://www.matools.com/timestamp

代码格式化: http://www.matools.com/codeformat

网页常用字体: http://www.matools.com/pageword

HTML ⇆ JS: http://www.matools.com/htmljs

XML ⇆ JSON: http://www.matools.com/xmljson

HTML特殊符号: http://www.matools.com/specialchar

CSV转HTML: http://www.matools.com/csv2tb

LESS编译器: http://www.matools.com/less

Markdown: http://www.matools.com/markdown

UBB编译器: http://www.matools.com/ubb

在线编码转换: http://www.matools.com/codeconvert

在线进制转换: http://www.matools.com/hexconvert

图片 ⇆ Base64: http://www.matools.com/img2base64

Base64编码解码: http://www.matools.com/base64

文字加密解密: http://www.matools.com/encrypt

MD5加密: http://www.matools.com/md5

摩斯电码: http://www.matools.com/morse

生成htpasswd: http://www.matools.com/htpasswd

HTTP状态查询: http://www.matools.com/pagestatus

端口扫描: http://www.matools.com/port

IP查询: http://www.matools.com/ip

favicon图标制作: http://www.matools.com/favicon

生成二维码: http://www.matools.com/qrcode

gif图制作: http://www.matools.com/gif

身份证信息查询: http://www.matools.com/id

中文简繁转换: http://www.matools.com/zhconvert

大小写转换: http://www.matools.com/upperconvert

邮编区号查询: http://www.matools.com/postcode

科学计算器: http://www.matools.com/calculator

单位换算器: http://www.matools.com/unit

汉字转拼音: http://www.matools.com/pinyin

字数统计: http://www.matools.com/countChar

文字去重: http://www.matools.com/repeat

在线答题: http://www.matools.com/exam


广告内容

推荐十款非常优秀的 HTML5 在线设计工具


关注我们

推荐十款非常优秀的 HTML5 在线设计工具