HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中彬Go将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。

1. CSS3 Selectors Test

在打开这个地址时,它会自动测试你当前使用浏览器所支持的css属性,然后用一个列表的形式给展示出来;你可以点击列表中列出的每个项目以查看其中所带的小例子.

Selectors-test-css3-tools-generators

2. CSS3 Please!

CSS3 Please!, 这个就很出名了,这个网站允许你在线编辑其中任意的数值,然后你可以看右面大大的效果展示,每更改一下数值,右面的变化都是实时的,非常棒,通过它,你可以查看到各种浏览器中的hack

Please-css3-tools-generators

3. CSS3 Generator

这个网站也很出名,它提供了css3里面的一些效果列表供你选择,然后你还可以对其进行各种的编辑,也是可以实时的查看效果的.

Generator-css3-tools-generators

4. CSS3 Transforms

您可以旋转,缩放,倾斜,并以其他方式去变换使用CSS3的HTML元素.探索CSS3的CSS变换(opera 10.5,火狐3.5和Safari 4及以上版本).

Transforms-css3-tools-generators

5. CSS3 Gradient Generator

这是一个可以在线修改css3渐变色彩的地方,无论是背景图还是边框都可以改变.

Gradient-css3-tools-generators

6. Border Radius

允许你创建圆角边框.

Border-radius-css3-tools-generators

7. Modernizr

Modernizr 是一个小而简单的 JavaScript 库,可以帮助你在现有的老式浏览器中充分利用新的web技术(CSS3,HTML5).

Modernizr-css3-tools-generators

8. CSS3 Generator

这个简单的CSS编辑器可以帮助你理解WebKit内核浏览器对CSS3的支持情况.

Widget-pad-css3-tools-generators

9. CSS3 Previews

许多新的CSS3例子.

Previews-css3-tools-generators

10. CSS Template Layout Module

关于css3的布局方面内容.

Template-layout-module-css3-tools-generators

11. 5 Techniques to Acquaint You With CSS 3

学习最流行最新的CSS3特性.

Techniques-acquaint-you-with-css3-tools-generators

12. Web Browser CSS Support

这个文档是一个标准的网络浏览器对CSS的支持列表,很详细.

Web-browser-support-css3-tools-generators

13. Font Drag

Font Dragr 是 HTML5/CSS3 驱动的用来测试自定义web字体的web应用.允许你拖放你的ttf,otf,svg和woff格式字体,你可以查看他们的表现.

Font-drag-css3-tools-generators

14. CSS3 Cheat Sheet

提供下载一份W3C中关于css3所包含完整的css属性,选择器类型和css3的允许的值列表的pdf文件.

Cheat-sheet-css3-tools-generators

15. Sizzle

一个 pure-JavaScript CSS 选择器引擎,还没研究过.

Sizzle-css3-tools-generators

16. Web Designers’ Browser Support Checklist

显示web浏览器对HTML5和CSS3的支持情况.

Web-designer-checklist-css3-tools-generators

17. CSS3 Color Names

CSS3 支持 147 种不同的颜色名字 (17个标准色加上130). 这里列出了这些支持的所有颜色名字,RGB值和十六进制值.

Color-codes-html5-css3-tools-generators

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet 是一个有用的网页设计者和开发表.基本上是一个简单的所有html标签的清单.

Visual-cheat-sheet-css3-tools-generators

19. HTML5 Demos And Previews

你可以查看HTML5例子,新的功能和浏览器的支持情况.

Demo-preview-html5-css3-tools-generators

20. The Power Of HTML5 and CSS3

这份存档覆盖了HTML5和CSS3的组合优势.

Power-html5-css3-tools-generators

21. HTML5 Cheat Sheet

与HTML5相关的信息.

Cheat-sheet-2-html5-css3-tools-generators

22. HTML5 Gallery

这个网站展示出了所有使用HTML5的列表.

via: 22 Handy HTML5 & CSS3 Tools, Resources And Guides

anyShare分享到：