22 Handy HTML5 & CSS3 Tools, Resources And Guides

 Posted in Coding 789 days ago • Written by: Daniels Mekšs
  • Buffer
  • Pin It
  •  38

preview html5 css3 tools generators html css cssHTML5 and CSS3 are bringing new features to us and in this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these new features.

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

preview handy html5 css3 resources guides tools html css css

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

Selectors-test-css3-tools-generators

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

Please-css3-tools-generators

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

Generator-css3-tools-generators

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms  (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

Transforms-css3-tools-generators

5. 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.

Gradient-css3-tools-generators

6. Border Radius

Allows you to create rounded edge rectangles.

Border-radius-css3-tools-generators

7. 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-css3-tools-generators

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

Widget-pad-css3-tools-generators

9. CSS3 Previews

Many new CSS3 feature previews and demos.

Previews-css3-tools-generators

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

Template-layout-module-css3-tools-generators

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

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

12. 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.

Web-browser-support-css3-tools-generators

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

Font-drag-css3-tools-generators

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

Cheat-sheet-css3-tools-generators

15. Sizzle

A pure-JavaScript CSS selector engine
designed to be easily dropped in to a host library.

Sizzle-css3-tools-generators

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

Web-designer-checklist-css3-tools-generators

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

Color-codes-html5-css3-tools-generators

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

Visual-cheat-sheet-css3-tools-generators

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

Demo-preview-html5-css3-tools-generators

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

Power-html5-css3-tools-generators

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

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

22. HTML5 Gallery

A showcase of sites using HTML5 markup

Gallery-html5-css3-tools-generators

 Did you enjoy this article and found it useful?

I'm a 17 year old teenager from Latvia making my allowance with blogging. I'm interested in photography, skateboarding, snowboarding and poker. You can find me on Flickr, Facebook and Twitter.
Free Website
 

 38 Brilliant Comments - Join Discussion Now!

  • Thomas Kirschner

    Posted 359 days ago
    25

    There is one tool more: HTML5 Generator – Chillout Cut

  • Allen Kannan

    Posted 360 days ago
    24

    Nice to become visiting your blog again, it has been months for me. Properly this article that ive been waited for so lengthy. I will need this article to total my assignment in the university, and it has exact same topic with your post. Thanks, wonderful share.

  • how to edit dvd

    Posted 369 days ago
    23

    you’ve gotten an ideal blog right here! would you prefer to make some invite posts on my blog?. This is probably one of the best mentions of this topic I’ve seen in quite a while. It’s obvious that your knowledge of the subject is deep and this made for a very interesting read. outstanding terrific awesome.

  • Erik Kubitschek

    Posted 370 days ago
    22

    Nice compilation of resources here, I’m looking forward to the next couple years of website design and development. I expect to see HTML5 and CSS3 move fast and become the standard, as with anything else, it’s critical to get ahead of the curve.

    Nice Post

  • Ian Harte

    Posted 377 days ago
    21

    Thanks so, so much for this! Helped me out a lot :]

    Peace!

  • wva

    Posted 446 days ago
    20

    A lot of very nice tools and recourses, I love css3 and html5

  • Brett Widmann

    Posted 522 days ago
    19

    This is a great collection of tools and resources! Thanks for sharing.

  • G13 Media

    Posted 762 days ago
    18

    Thanks for the cheat sheets, I can’t wait for all the browsers (especially IE) to be on the same page and support the new technology.
    .-= G13 Media´s last blog ..Web Site Design San Diego Seo =-.

  • Derek Johnson

    Posted 777 days ago
    17

    One resource I refer back to a lot is html5doctor.com

    Lots of easy to understand explanations and examples of html5.

  • Angel Grablev

    Posted 783 days ago
    16

    Missed 52framework.com again :) HTML5 and CSS3 framework!

  • Gaurav Mishra

    Posted 784 days ago
    15

    Nice listing of all the new trends

  • Pankaj

    Posted 786 days ago
    14

    Great article, really helpful

  • Mohit Aneja - CSSJockey

    Posted 786 days ago
    13

    Cool tips!!!
    Gr8 info…thnx for sharing!!

  • Shane

    Posted 787 days ago
    12

    great post, I will definitely keep these in mind for the future.
    Good job putting this together, thanks.

  • Chris McManus

    Posted 787 days ago
    11

    Nice collection, thanks for putting this together. So much to read from this page alone, might need to make a separate bm folder just for this. I am excited for html5 and css3, I just wish at times this new stuff could be seen in older browsers. Ahh well, at least we have mobile.
    >.<

  • Gordonpetr

    Posted 788 days ago
    10

    Really good CSS tips. Very useful and interesting. Thanks! :)

  • Demir

    Posted 788 days ago
    9

    great post and very useful guide for all web designers.
    .-= Demir´s last blog ..Web Tasarım Kaynakları #5 =-.

  • Rishi Luchun

    Posted 788 days ago
    8

    Great post thanks for this
    .-= Rishi Luchun´s last blog ..The Bokeh effect =-.

  • Cheap Minisite Design

    Posted 788 days ago
    7

    This site is really great! very helpfull! especially for me as web designer! thanks

  • Hian Battiston

    Posted 788 days ago
    6

    Great man! Thank for the tips!
    .-= Hian Battiston´s last blog ..Photoshop CS5 – Surpreenda-se =-.

  • Leonel Hilario

    Posted 788 days ago
    5

    Good CSS3 Resources!
    .-= Leonel Hilario´s last blog ..Chive a promising MySQL Manager or the next phpmyadmin! =-.

  • nizamil putra

    Posted 788 days ago
    4

    nice article…
    keep great post @1stwebdesigner

  • Anny Mishal

    Posted 788 days ago
    3

    good HTML and CSS Tips. keep it up.
    Thanks

  • emano

    Posted 788 days ago
    2

    great collection! I’ll keep in minds.

    Thanks!

  • Andreyco

    Posted 789 days ago
    1

    Realy great article, worth watching and reading.
    You saved me a lot of time. I dont have to look for these resources anymore

1 2
US