Today most browsers support CSS3 / HTML5 (..even though the biggest limiting factor of course still is – older – versions of Internet Explorer!)
And with the vast array of online CSS3 generators there really is no excuse for still using PNG and other old techniques to achieve dropshadows, rounded corners, gradients etc.
In part due to the CSS vendor prefixes (or CSS browser prefixes) it’s a bit of a hazzle to create the CSS for using many of the CSS3 features manually – If you’re not familiar with browser prefixes, they are used to add new features, that may not be part of a formal specification, and to implement features in a specification that hasn’t been finalized. The CSS browser prefixes are:
- Internet Explorer:
So in order to encourage the use of CSS3 – Here’s a list of my favorite CSS3 online tools:
enjoycss.com is an advanced CSS3 generator which is capable of creating dropshadows, rounded corners, gradients, animations and much more – furthermore it contains a gallery which contains a variety of pre-defined buttons, text inputs etc.
css3generator.com was created by Randy Jensen and can also create dropshadows, rounded corners, gradients and animations – the interface is a bit more “rough” than e.g. EnjoyCSS, however it’s still pretty capable.
css3maker.com is pretty cool! – It supports most CSS3 features including simple animation. Furthermore it shows Browser Compatibility for each feature etc.
Do you need gradients? Take a look at colorzilla.com/gradient-editor which is “A powerful Photoshop-like CSS gradient editor” – it handles both radial and diagonal linear gradients, and the new version 4 even support multi-stop gradients for IE9 (using SVG). Awesome!
Ceaser is a CSS Easing Animation Tool and my favorite for creating “ease-in .. ease-out” animation, mostly due to the fact that it supports the classic Penner equations known from Flash and jQuery (which is waaay better than the standard “ease-in” / “ease-out”) – and the bezier editor is just awesome!
If you’re worried about which CSS3 properties are supported in which browser – take a look at the CSS3 Browser Support Reference – it’s updated and tested regularly with all major browsers.
Modernizr enables you to use CSS3 for properties where it is supported, and to provide sensible alternatives where it is not! – really cool and worth using.
| || |
As they write on the website: “PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.”
So there you have it! – some of my favorite online CSS3 tools .. now go tweak those gradients!
Do you have any tips or advice about CSS3 or some cool tool which should be on the list? Leave a comment and share your recommendations!