20个最新的 CSS3 和 HTML5 工具

     <p><strong>1. <a href="/misc/goto?guid=4958329937339228323" target="_blank">Sencha Animator</a></strong><a href="/misc/goto?guid=4958329937339228323" target="_blank"> </a><br /> 用标准的网页技术打造超炫的动画，Senchar Animator使用CSS3来打造动态的文字和图片，流畅的变换，阴影，渐变等效果。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/83b655704acc3809f93219be770dd5d3.jpg" width="570" height="400" /><br /> <br /> <strong>2. <a href="/misc/goto?guid=4958318549805400541" target="_blank">CSS LINT </a></strong><br /> 这个工具可以帮你找出你CSS中的问题。不光是语法错误，它还能指出你的代码写的不合理的地方，或者不高效的地方。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/1884d3b09e378b73ca837c93442acaec.jpg" width="570" height="400" /><br /> <br /> <strong>3. <a href="http://www.open-open.com/lib/view/open1329630294811.html" target="_blank">Normalize.css</a></strong><br /> Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/b5615b2f2fbe2bc3e403e8a62f285488.jpg" width="570" height="400" /><br /> <br /> <strong>4. <a href="/misc/goto?guid=4958325621283546918" target="_blank">Spritemapper</a></strong> <br /> Spritemapper 是一个组合不同图片并生成 CSS 位置代码的工具。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/d911c8081d988ac913ee7a74a8374f8f.jpg" width="570" height="400" /><br /> <br /> <strong>5. <a href="http://www.open-open.com/lib/view/open1329630480749.html" target="_blank">holmes.css</a></strong><br /> 这个CSS可以帮你找出你网页中写的不标准的HTML代码。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/e9d440e39d612e4be5b91aa009b7c42a.jpg" width="570" height="400" /><br /> <br /> <strong>6. <a href="/misc/goto?guid=4958318556121871072" target="_blank">prefixMyCSS</a></strong><a href="/misc/goto?guid=4958318556121871072" target="_blank"> </a><br /> 这个工具可以帮你的CSS代码添加前缀。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/d1743b3e4f5187110efa0783a12fe0af.jpg" width="570" height="400" /><br /> <br /> <strong>7. <a href="/misc/goto?guid=4958322165925741766" target="_blank">Sprite Cow</a></strong><a href="/misc/goto?guid=4958322165925741766" target="_blank">  </a><br /> 这个工具可以帮助你创建CSS Sprite。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/c9939388a24cd7c3d83cd751d5140341.jpg" width="570" height="400" /><br /> <br /> <strong>8. <a href="/misc/goto?guid=4958323070286319511" target="_blank">Patternizer</a></strong><a href="/misc/goto?guid=4958323070286319511" target="_blank">  </a><br /> 这个工具可以帮助你创建复杂条纹图案的CSS。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/0ca56f3886fc400d9b8bae8b41d6b29e.jpg" width="570" height="400" /><br /> <br /> <strong>9. <a href="/misc/goto?guid=4958323067240606681" target="_blank">Prefixr</a></strong><a href="/misc/goto?guid=4958323067240606681" target="_blank">  </a><br /> 这个工具可以帮助你创建跨浏览器的CSS代码。输入你的CSS代码，然后勾选一些选项，它就会生成各个浏览器兼容的CSS给你。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/970511c24324f52d67d00136f6fce697.jpg" width="570" height="400" /><br /> <br /> <strong>10. <a href="/misc/goto?guid=4958329946393447911" target="_blank">Patternify</a></strong>  <br /> 这个工具是一个简单的CSS生成器。你可以直接在它的网页上画出你想要的样式，然后它就会生成相应的CSS给你。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/104a7289ba4bdc90a950ed16d2a225db.jpg" width="570" height="400" /><br /> <br /> <strong>11. <a href="/misc/goto?guid=4958329947198990112" target="_blank">CSS Shapes</a></strong> <br /> 这个工具可以帮你用纯CSS来生成各种图形。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/017313b2e667878526910d5686e486e1.jpg" width="570" height="400" /><br /> <br /> <strong>12. <a href="/misc/goto?guid=4958185645036266141" target="_blank">Initializr</a></strong><a href="/misc/goto?guid=4958185645036266141" target="_blank"> </a><br /> 这个工具可以帮助你生成一个标准的HTML5网页模板，然后你可以基于这个模板完成你的网页。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/dfa673e13d99f2064fc590f2bb9ecaba.jpg" width="570" height="400" /><br /> <br /> <strong>13. <a href="/misc/goto?guid=4958329949471723249" target="_blank">Gury</a></strong><a href="/misc/goto?guid=4958329949471723249" target="_blank"> </a><br /> Gury 可以帮助你创建基于 Canvas 的动画。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/3c544cab59c79901c735667cd153d876.jpg" width="570" height="400" /><br /> <br /> <strong>14. <a href="http://www.open-open.com/lib/view/open1329631230609.html" target="_blank">oCanvas</a></strong><br /> oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/41439f9b7129ae6a70a7ba7124d9d22c.jpg" width="570" height="400" /><br /> <br /> <strong>15. <a href="/misc/goto?guid=4958193856985135572" target="_blank">Modernizr</a></strong><br /> Modernizr 是一个利用 JS 和 CSS 来检测浏览器说支持功能的小工具。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/9acdedf5c2922deb163ce34cb23f8d22.jpg" width="570" height="400" /><br /> <br /> <strong>16. <a href="http://www.open-open.com/lib/view/open1329631293093.html" target="_blank">Response JS</a></strong><br /> Response JS 是一个轻量级的 jQuery 插件，用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的环境动态替换HTML代码。例如根据屏幕大小，动态的替换img标签的src地址。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/1acb5cc609ecea22679283ff3dc9e750.jpg" width="570" height="400" /><br /> <br /> <strong>17. <a href="/misc/goto?guid=4958190472341403428" target="_blank">Mercury Editor</a></strong><a href="/misc/goto?guid=4958190472341403428" target="_blank"> </a><br /> 这是一个全功能的 HTML5 编辑器，可以帮助你的团队在浏览器中编辑文档。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/5ad5a8fd4e383fe611461bd022542602.jpg" width="570" height="400" /><br /> <br /> <strong>18. <a href="http://www.open-open.com/lib/view/open1329632880390.html" target="_blank">Sugar</a></strong><br /> Sugar 是一个JavaScript库。它扩展了现有的JS对象的方法，让你可以用更少的代码做更多的事情。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/8d5f6ca932f5909c902814900541e6c5.jpg" width="570" height="400" /><br /> <br /> <strong>19. <a href="/misc/goto?guid=4958329953220769494" target="_blank">Buzz</a></strong><br /> Buzz 是一个用于操作HTML5音频标签的JavaScript library 。它是一个没有用到其它JavaScript框架独立Library。并拥有丰富的API可以用来管理这个音频标签提供的所有功能。支持的功能包括播放、 暂停、停止、循环和音量控、取得音频信息、判断音频类型是否支持、可同时处理多个音频文件。还可以取得播放结束、错误产生或音量变化等事件。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/28408e67e0392d0eccb86fc637f45425.jpg" width="570" height="400" /><br /> <br /> <strong>20. <a href="/misc/goto?guid=4958329954017729326" target="_blank">Recurly.js</a></strong><br /> Recurly.js 是另一个 JS 实现的表单美化插件。<br /> <img alt="20个最新的 CSS3 和 HTML5 工具" src="https://simg.open-open.com/show/51f8651136f3d06e8287647f966911a8.jpg" width="570" height="400" /></p>    <div></div>