10 款专为网页设计师准备的 HTML5 在线工具

     <div id="OSChina_News_22615" class="NewsContent TextContent NewsType2">     <p>HTML5 日渐火热，不管是作为开发者还是设计师而言，本文专为 Web 设计师介绍 10 个在线的 HTML5 工具。</p>     <p><strong><a href="/misc/goto?guid=4958196081872588999">Online Sprite Box Tool</a></strong></p>     <hr />     <p><img title="q1.jpg" border="0" alt="q1.jpg" src="https://simg.open-open.com/show/170a04c5d7c6c18db6ef0b61077877ac.jpg" width="580" height="507" /></p>     <p>照片压缩在今天非常流行，它带来很多好处，可降低带宽占用和提升加载速度。该工具使用 jQuery /CSS3 和 HTML5 开发，通过相当方式来调整你的照片。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196082609123679">Online Font Testing Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/e5116e24ce25fb538f60627a3064c265.jpg" width="580" height="400" /></p>     <p>一个体面的字体是任何网页设计的一个非常重要的一部分，它是一种责任，每一个设计师，要挑最好的的字体。在线字体测试工具是一个惊人的字体书签，让您即刻在一个新的字体查看的任何网页，甚至没有改变任何HTML或CSS。您可以拖动到顶部的工具栏font.ttf文件，然后他们将在快速查看列表中显示。很多免费网站存在在那里，你所要做的是简单地输入到谷歌的“字体”。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196083352669538">Online Velocity Sketch Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/75712724f24e2cc595c3e8eb0afba0d7.jpg" width="580" height="400" /></p>     <p>这是一个在线使用 HTML5 Canvas 技术的绘图工具</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196084080533264">Online Pattern Generator Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/635517addaf6add228c43ff36ad349ff.jpg" width="580" height="329" /></p>     <p>Online Pattern Generator Tool 是一个很酷的工具，可让网页设计师创建页面背景以及头部背景，提供大量的参数用来调整背景。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196084805305096">Online XRay Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/be858ab987500065adc12dbd2ed71747.jpg" width="580" height="411" /></p>     <p>该工具可以让你直观的显示页面各个元素的详情。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196085534565880">Online Automatoon (animation) Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/2179bb03a2d40e43e21ac9c69418f062.jpg" width="580" height="435" /></p>     <p>这是一个纯 HTML5 工具，无需 Flash 意味着你的工作可支持 iPhone/iPad 和 Android 设备。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196086287712196">Online HTML5 Audio Maker Tool</a></strong></p>     <hr />     <p><img title="10 款专为网页设计师准备的 HTML5 在线工具" border="0" alt="10 款专为网页设计师准备的 HTML5 在线工具" src="https://simg.open-open.com/show/ec475ecc9159b59aa751b61e3254f321.jpg" width="580" height="302" /></p>     <p>HTML5 可以让我们使用 audio 标签，Online HTML5 Audio Maker Tool 是一个很棒的工具用来更高效的生成 audio 标签。</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196087011747585">Online SVG to HTML5 Canvas Tool</a></strong></p>     <hr />     <p><img title="q8.jpg" border="0" alt="q8.jpg" src="https://simg.open-open.com/show/d7ea5abbae702a3023bfeffd3dd39c4f.jpg" width="580" height="392" /></p>     <p>大多数矢量图制作软件 (Illustrator, Inkscape 等) 可导出 SVG 文件 (Scalable Vector Graphics). 该工具可以让你将 SVG 文件转成 HTML5 Canvas ，很酷吧？</p>     <hr />     <p><strong><a href="/misc/goto?guid=4958196087750573654">Chrome Ajax Animator Tool</a></strong></p>     <hr />     <p><img title="q9.jpg" border="0" alt="q9.jpg" src="https://simg.open-open.com/show/68c15d7b785d7f760e3714c5c72f868b.jpg" width="579" height="280" /></p>     <p>Chrome Ajax Animator Tool 是一个基于 HTML5 的 web 动画套件，可在线和离线使用，但只支持 Chrome 浏览器。</p>    </div>