HTML5 is a standard for structuring and presenting content on the web and incorporates features such as video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight. If you are following the news lately, many new websites are opting HTML5 standards and brings many new features. Today, we have gathered a list of few HTML5 tools, cheat sheets and resources which help designers learn about HTML5 and CSS3.

Recommended Posts :

• 10 Useful Free WYSIWYG HTML Editors For Web-Based Application
• 28 Useful Front End Web Developer Cheat Sheets
• 20 Best Color Tools For Web Designers

CSS3 Selectors Test

CSS3 Selectors test automatically test your browsers compatibility with large number of CSS3 selectors. If it is not compatible, it will tell you about it and you can even check the results of each CSS selector, gives you an example along with the explanation of the test carried out.

HTML5 Security Cheatsheet

If you are looking for a way to learn HTML5, the cheatsheet contains all the details you want to know and learn about HTML5.

CSS3 Please!

CSS3 Please is a cross browser CSS3 rule generator. Using CSS3 Please, You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.

HTML5 Gallery

HTML5 Gallery showcase sites that use of HTML5 markup, so that we can see how people have interpreted the specification and how they’ve implemented it. Another main objective of HTML5 gallery is to help people learn about html5 and how it should be used and how to implement it.

HTML5 CheatSheet

Everything you need to know about HTML5 features and other information is present in this sheet including all currently supported tags, their descriptions, their attributes and their support in HTML 4.

CSS3 Generator

CSS3 Generator is an excellent tool which helps you create and customize multiple CSS3 effects. Just scroll the drop-down menu and select the effect you want to create or customize. Rest of the work will be done by CSS3 generator.

CSS3 Transforms

CSS3 transform Is another online CSS3 tool which can help you rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Once you open the website, you can customize 2D transforms and animations according to your needs and then test it.

Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

IE Print Protector

IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer. IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print. It also contains information on how display HTML5 supported content on earlier versions of Internet Explorer.

HTML5 Revision Tracker

HTML5 Revision Tracker helps you to compare two HTML5 websites and find out the difference.

HTML5 Visual Cheat Sheet

HTML5 cheatsheet is an excellent list for web designers and developers which contain all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

Power of HTML5 and CSS3

Power of HTML5 and CSS3 is an excellent article which contains everything you need to know about HTML5 and CSS3. You can even find out the advantages of using HTML5 and CSS3 rather than the old standards.

HTML5 Canvas Cheat Sheet

HTML5 canvas cheat sheet contains almost all the canvas elements of HTML5 which can be used by developers and web designers.

HTML5 Pocket Book

HTML5 Pocket Book contains all the basics HTML5 coding and elements your need as a designer.

CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask, border, or list item bullet.

Border Radius

Border Radius is an excellent tool which helps you create rounded borders rectangles using CSS3 and HTML5. Just type the HTML5/CSS3 coding and it will give you the preview of the changes.

Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. Modernizr allow you to target specific browser functionality in your stylesheet.

CSS Template Layout Module

This module contains everything you need to know about CSS and what It is capable of. According to the abstract, “CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents.”

CSS3 Previews

CSS3 Previews contains some samples which showcase the new features and functions that being offered by CSS3 like borders, backgrounds, text effects etc.

CSS3 Generate (2)

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit. This demonstration works on webkit-based browsers, such as Safari, mobile Safari and Chromium.

Font Dragr

Font Dragr is an excellent HTML5 powered web app which enable users to test custom fonts. The utility allows you to drag and drop fonts into the web page for install preview of how the font will look like in multiple browsers.

CSS3 Cheatsheet

The CSS3 Cheat sheet contains complete listing of all the properties, selectors’ types and allowed values in the current CSS 3 specification from the W3C.

CSS3 Color Names

CSS consists of around 147 different color names. This list contains all the color names and there hexadecimal and integer values.

Web Designer’s Browser Support Checklist

Web Designer browser support check list contains all the browsers and there compatibility with the latest CSS3 and HTML5 features.

Sizzle

An open-source JavaScript CSS selector engine designed to be easily dropped in to a host library.