Generally speaking, CSS is very easy. But when browser vendors started implementing CSS3 features, things became little complicated. Not difficult but complicated. This is mainly due to two reasons: first of all many new CSS3 properties (e.g., transition, gradient, transform, etc) are not that simple and secondly we have to use vendor specific extensions.
You should also take a look at “CSS3 Unleashed: Tips, Tricks and Techniques” – This post was published in June 2009, but we have just revamped this entire article, which now contain all the tools mentioned in this post and several other new useful resources to help you understand and learn CSS3. Another related roundup that we have just updated with lots of new cool tools (including CSS3 related tools) is one of our most popular post “List of Really Useful Tools for CSS Developers”.
Here is our list of useful tools for CSS3 developers:
- CSS3 Please!
Cross browser CSS3 rule generator, supports: border-radius, box-shadow, gradient(linear), rgba colors, transform (rotate), transition and @font-face.
- CSS3 Generator
Supports border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.
- CSS3 Sandbox
Consist of CSS3 generator tools for Linear Gradients, Radial Gradients, Text Shadows, Box Shadows, Transforms and Text Stroke.
- @font-face Generator
Easy to use CSS3 @font-face genertor from Font Squirrel.
- CSS3 Gradient Generator
Generates linear “gradient” property for Mozilla and WebKit browsers.
- CSS Border Radius
Generates “border-radius” property in Mozilla, WebKit and standard CSS3 syntax.
- Webkit CSS3 Generator
Simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.
- CSS3 Learning Tool
Dynamically gets the vendor prefix for your browser and checks whether the property is supported with or without it.
- CSS3 pseudo-class Selector Emulation
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages, start using these selectors in your style sheets and they’ll work in IE.
- CSS3 support for Internet Explorer 6, 7, and 8
IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
- YUI Selector Utility
The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
- When Can I Use
Browser compatibility tables for features in CSS3, HTML5, SVG and other upcoming web technologies.
- Browser Support Checklist
Uses Modernizr library to determine what “advanced” features your browser supports, including CSS3 features and selector supports.
- CSS3 Selectors Test
Automatically run a large number of small tests which will determine if your browser is compatible with number of CSS selectors.
Online tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
- CSS3 Cheat Sheet & Quick Reference Guide
Provides listing of the current CSS3 specification, listing of the properties accepted values, common selector pattern reference, organized by type / module, selector Type reference and unit reference and information. (For PDF Version)
- CSS3 Pseudo Classes
Part of SitePoint’s CSS Reference.
- CSS3 Cheat Sheet
listing of CSS3 properties, selectors types and allowed values in PDF format.
- CSS3 Color Names
Provides list of all 147 color names and their values in alphabetical order.
Now that you are finished with this round-up, consider reading our freshly updated related posts:
I hope you have enjoyed this post and found some new useful tools to work with. Please feel free to suggest any addition to the list in your comments.