Advertisment
HTML5 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!
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.
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.
3. CSS3 Generator
Allows you to create and costumize multiple CSS3 effects.
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).
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.
6. Border Radius
Allows you to create rounded edge rectangles.
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.
8. CSS3 Generator
This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.
9. CSS3 Previews
Many new CSS3 feature previews and demos.
10. CSS Template Layout Module
Learn about popular CSS3 modules and opportunities CSS3 offers.
11. 5 Techniques to Acquaint You With CSS 3
Learn some of the most popular new CSS3 features.
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.
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.
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.
15. Sizzle
A pure-JavaScript CSS selector engine
designed to be easily dropped in to a host library.
16. Web Designers’ Browser Support Checklist
Displays web browser support on HTML5 and CSS3.
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.
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.
19. HTML5 Demos And Previews
You can watch HTML5 demos, new features and check out browser support.
20. The Power Of HTML5 and CSS3
Article covering HTML5 and CSS3 combination advantages.
21. HTML5 Cheat Sheet
HTML5 features and useful info at one place.
22. HTML5 Gallery
A showcase of sites using HTML5 markup
[...] pas à nous communiquer vos suggestions!1- Comment promouvoir un artiste en ligne2- 22 outils, ressources et guides pour le CSS3 & le HTML53- Qu’est-ce qu’une marque ?4- Les premières configurations à faire sur votre blogue [...]
It´s very nice tutorial. I waiting for next posts…
Cool tips!!!
nice one please keep posting
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 =-.
[...] 22 Handy HTML5 & CSS3 Tools, Resources And Guides Official Link [...]
One resource I refer back to a lot is html5doctor.com
Lots of easy to understand explanations and examples of html5.
[...] Official Link [...]
[...] 22 Handy HTML5 y CSS3 herramientas, recursos y guías | Diseño Gráfico y Web Blog (tags: css) También te puede interesar:links for 2010-03-29links for 2010-03-30links for 2010-03-23links for 2010-03-22links for 2010-03-24AKPC_IDS += "1178,";Popularity: 1% [?] Thomas on Marzo – 26 – 2010 categories: General [...]
Missed 52framework.com again :) HTML5 and CSS3 framework!
[...] 22 Handy HTML5 & CSS3 Tools, Resources And Guides [en] :: (Vía CSS Globe [en]) Suscríbete a los comentarios o anímate y deja tú el tuyo | Si [...]
Nice listing of all the new trends
[...] Design Tools for Social Media Pros 7. Iconfinder – Icon search made easy 8. 22 Handy HTML5 & CSS3 Tools, Resources And Guides | Graphic and Web Design Blog 9. David Mamet’s Master Class Memo to the Writers of The Unit | Movieline 10. Web [...]
[...] 22 handy HTML5 CSS3 tools resources and guides [...]
Great article, really helpful
Cool tips!!!
Gr8 info…thnx for sharing!!
[...] CSS3 y más: un artículo muy completo con 22 recursos para desarrolladores y diseñadores web con unas útiles [...]
[...] while still maintaining a fine level of control over older browsers that may not yet support these new technologies. Modernize HTML5 [...]
[...] Handy HTML5 & CSS3 Tools, Resources And Guides via 22 Handy HTML5 & CSS3 Tools, Resources And Guides | Graphic and Web Design Blog. Published [...]
great post, I will definitely keep these in mind for the future.
Good job putting this together, thanks.
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.
>.<
[...] 1stWebdesigner Resources – 22 HTML5 und CSS3 Tools [...]
Really good CSS tips. Very useful and interesting. Thanks! :)
[...] Link [...]
great post and very useful guide for all web designers.
.-= Demir´s last blog ..Web Tasarım Kaynakları #5 =-.
Great post thanks for this
.-= Rishi Luchun´s last blog ..The Bokeh effect =-.
This site is really great! very helpfull! especially for me as web designer! thanks
Great man! Thank for the tips!
.-= Hian Battiston´s last blog ..Photoshop CS5 – Surpreenda-se =-.
Good CSS3 Resources!
.-= Leonel Hilario´s last blog ..Chive a promising MySQL Manager or the next phpmyadmin! =-.
nice article…
keep great post @1stwebdesigner
[...] 22 Handy HTML5 & CSS3 Tools, Resources And Guides [...]
good HTML and CSS Tips. keep it up.
Thanks
great collection! I’ll keep in minds.
Thanks!
[...] 22 Handy HTML5 and CSS3 Tools, Resources and Guides [...]
Realy great article, worth watching and reading.
You saved me a lot of time. I dont have to look for these resources anymore