分享10个必备的简化Web设计的HTML5工具

这个文章是适合真正想去做HTML5应用的设计人员和开发人员阅读。这里我将不再重复HTML5开发的重要性。因为大家都已经知道这点。这里我收集了10个HTML5的工具帮助你在不同的方面简化你的开发和设计。如果你也喜欢这个文章,请在我们的网站GBin1留言支持!

1. FindmebyIP

一个列出了所有浏览器对于HTML5支持细节的网站。特别适合对于浏览器的兼容有问题的朋友。优点是在线,可以方便大家查看。类似的网站还有这个:Caniuse.com

2.  Video JS 

一个基于javascript的HTML5视频播放器。拥有三个部分:一段嵌入代码,一个javascript类库以及HTML/CSS的皮肤。特别适合一些视屏网站来显示一个统一UI的视频,并且兼容各大平台(包括浏览器及其设备)。
免费,开源并且轻量级,当然你需要自己配置一些代码。

3. Flash to HTML5 online 

领先的在线flash转HTML5的网站之一。能够帮助你快速的将SWF文件转化为HTML5格式,包括,文字,线条和图片。并且它包含一个可安装版下载:version for windows and Mac, 支持苹果和windows。
特别适合需要将flash转化为HTML5或者将swf反编译成fla/flex的设计者。 
免费在线使用,方便快捷,反编译高效,使用简单,但是只支持AS1.0

4. Sketchpad

一个使用JS和HTML开发的在线画图工具。它是一个能够由你定制的工具,帮助你画任何你需要的图。 适合设计人员使用元素或者javascript创建一个画图类型的应用。 在线工具,使用方便并且UI友好。

5. Initializr

这个工具最有吸引力的地方在于模板。它能帮助你生成非常干净并且可定制的模板。适合设计人员开始一个基于HTML5的boilerplate的项目。非常实用。适合于新设计和自定义。

6. Lime JS

一个HTML5的游戏框架,能够快速的在浏览器,触摸设备上开发本地体验的游戏。非常棒的一个工具。值得一试。

7. Modernizr

一个非常小的JS类库能够为HTML5和CSS3的网站探测本地的现可能性。 允许你在你的样式表指定浏览器特定功能。无论浏览器是否支持HTML5你都可以使用HTML5和CSS3的特性。适合需要开发HTML5网站的开发人员。

8. Online HTML5 Audio maker Tool

为不同的浏览器提供音频解决方案,能够让你使用HTML5的audio标签。针对不同的浏览器使用不同的音频格式。适合需要添加音频到网站的开发人员

9.  HTML visual Cheat Sheet

一个必要的可视化网格可以帮助你列出所有HTML4和HTML5支持的标签及其属性。 允许你看到你寻找的所有内容。 适合所有开发HTML5网站的开发人员。

10. Font Dragr

一个非常好的拖放改变网站字体的工具, 你可以方便的添加你需要支持的字体。具体介绍参考这篇文章:分享一个实时动态修改测试网站字体的jQuery代码片断

以上是我们收集的HTML5及其CSS3的设计工具,希望大家能够喜欢,如果你有其它的好工具,请你和我们分享。谢谢!

时间: 2024-09-27 18:05:44

分享10个必备的简化Web设计的HTML5工具的相关文章

《响应式Web设计:HTML5和CSS3实践指南》——1.1节简介

1.1 简介 响应式Web设计是自我学生时代BBS上出现ASCII字符图形至今,Web开发领域最让人感到兴奋的事情之一.HTML5.CSS3及jQuery给旧网络注入了新生命,给使用你应用程序的用户带来乐趣和兴奋.本章介绍的几个方法将会帮助你构建自己的响应式HTML元素及媒介. 这些方法有易有难.所涉及的响应式Web设计的各种元素代码均能在本书中找到,因此书中所提到的所有内容都是可以实现的.每一个响应式Web设计的方法都有助于优化网站展示,无论你的用户使用何种尺寸的何种设备,都会从中得到令其惊叹

《响应式Web设计:HTML5和CSS3实践指南》——2.5节使用画布旋转文本

2.5 使用画布旋转文本HTML5中的画布元素不只是能给文本着色或者添加阴影,你也可以用它来移动或操作位于画布区域中的元素对象.在本节中,我们将旋转位于画布中的元素对象. 2.5.1 准备工作学习本节需要掌握之前的几节.如果跳过了之前的几节也没关系,你还可以参照完整代码来学习. 2.5.2 实现方式一旦你完成了之前技巧中的画布设置步骤,那么实现旋转的基本步骤很简单.在函数开头添加一个rotate方法的调用. 效果如下图所示. 2.5.3 工作原理JavaScript能够通过rotate方法来旋转

10个必备的移动UI设计资源站

  正如大家看到的,现在许多人都使用手机访问互联网,所以这让越来越多的公司去开发或重构新的web解决方案,因为他们认识到自己的项目有效的运行在各种移动设备上是多么的重要!现在市面上存在太多流行的移动设备了,网页设计师们也不得不跟随潮流适应技术发展和变化规律,这些小巧的用户界面设计技能已经让一小部分愿意改变自己的同学们尝到了甜头,有付出就有收获!除了学到全新的技术,也有了踏实的收入,是的!薪水翻倍了! 创建移动设计模式是非常重要的一步,记住!这是为移动设备设计而不是web.不仅仅是移动屏幕远小于普

《响应式Web设计:HTML5和CSS3实践指南》——2.10节基于before及after伪元素添加字符

2.10 基于before及after伪元素添加字符 就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应用场景.例如一个场景是,需要在显示的时候把文本内容放进引号之中,但是同时不想在内容或者主题文件中添加这些引号,显然这样是比较明智的做法.或者你也想通过标签和@标记尝试时下流行的Twitter,例如想要在内容之前添加#或是@符号.采用CSS标记方法即可完成功能,呈

《响应式Web设计:HTML5和CSS3实践指南》——导读

目 录 第1章 响应式元素及媒介1.1 简介 1.2 基于宽度百分比的图像缩放1.3 基于cookie及JavaScript的响应式图像 1.4 使视频自适应于屏幕宽度1.5 基于媒介查询的图像缩放 1.6 基于媒介查询的动态导航栏 1.7 基于尺寸的响应式内边距1.8 基于CSS3按钮的进度条 第2章 响应式字体 2.1 简介2.2 创建自适应的响应式字体2.3 使用画布实现文本阴影2.4 使用画布实现内侧阴影和外侧阴影 2.5 使用画布旋转文本2.6 使用CSS3旋转文本2.7 使用CSS3

《响应式Web设计:HTML5和CSS3实践指南》——1.4节使视频自适应于屏幕宽度

1.4 使视频自适应于屏幕宽度 流媒体视频同样可以为响应式的.在HTML5页面中嵌入响应式视频是一件非常简单的事情.如video标签支持百分比的宽度设置,但是问题在于,该方案需要网站主机拥有对应的视频源.如果已经有视频源,那么一切都易如反掌. 不过,使用视频托管网站(如YouTube或Vimeo)比自己托管更具优势.首先,自己的托管服务器可能会受到带宽或磁盘空间的限制.其次,相比于使用自己的托管服务器,使用视频托管网站上传可用的Web视频的整个过程更加便捷. 1.4.1 准备工作 视频托管网站允

《响应式Web设计:HTML5和CSS3实践指南》——2.7节使用CSS3制作3D文本

2.7 使用CSS3制作3D文本在前几节中,我们使用画布元素创建了投影.斜面以及内侧阴影.使用CSS3可以让文本真的站起来.使用CSS3的text-shadow属性,可以让文本看起来好像伸出屏幕来面对用户. 2.7.1 准备工作如果你想直接跳过本节,你可以从Packt Publishing的网站上下载代码.否则,如果你想边学边做,那就一起来创建属于你自己的3D文本吧.下面将通过组合多个CSS3的阴影效果来实现3D特效. 2.7.2 实现方式在IDE中,创建一个在body元素中只有一个header

《响应式Web设计:HTML5和CSS3实践指南》——2.13节基于边框半径的圆角实现

2.13 基于边框半径的圆角实现在网页设计的世界中,弧形圆角一度被看做圣杯(Holy Grail).它永远都是存在的,但是却很难实现.对于如何使得元素拥有弧形圆角,设计者们往往只能在有限且拙劣的方法中选择. 2.13.1 准备工作在CSS3的世界里,这些烦恼都不复存在.通过设置border-radius属性这样简单的方法便能给元素创建圆角特效. 2.13.2 实现方式首先创建一个HTML元素.该方法对于含有边框的元素均能生效.因此可以创建一个带有边框的文本段落,然后从http://lipsum.

《响应式Web设计:HTML5和CSS3实践指南》——1.2节基于宽度百分比的图像缩放

1.2 基于宽度百分比的图像缩放本方法依赖于客户端编码来完成对于大图像的缩放功能.客户端只需单张图像来依据浏览器的窗口大小呈现图像.如果对于客户端的网络带宽有足够的信心,确信该操作不会使得页面加载变慢,那么本方法是比较可行的. 1.2.1 准备工作毫无疑问我们需要一张图像.使用Google的图像搜索来获取一张高分辨率的图像.例如,搜索 robots,将会得到158 000 000条记录,还不错的结果.但是想要的是一张大尺寸的图像,因此单击Search tools选项,然后将Any Size选项改