The latest advancements in cascading style sheets offer web designers a bevy of new tricks that once required JavaScript or were simply impossible to do. Effects like rounded corners, drop shadows, rotated elements or gradient fills are all part of CSS 3, and modern web browsers support them right out of the box.
However, while CSS 3 is powerful, remembering all the details of each element's syntax can be overwhelming. To make matters more confusing, CSS 3 hasn't been finalized yet, so browser makers are using browser-specific prefixes for the new attributes. For example, to get an orange to green radial gradient in Firefox, you'd use this code: background:-moz-radial-gradient(60% 50% 40deg, #866400, #FF4E28 71%).
A bit of a drag, right?
Cheat sheets help, but sometimes it's much simpler to let an automated tool do the hard work for you. Our friends at Ajaxian recently discovered CSS 3.0 Maker, which covers all the new elements, like transitions, drop shadows and even @font-face and offers a clean simple set of tools to tweak the look on an element visually and then cut and paste the code into your style sheets.
Other similar sites include Randy Jensen's CSS 3 Generator, the Style Master CSS Editor and CSS 3 Please.
CSS 3.0 Maker takes more of a kitchen sink approach by including a number of different effects. Sliders allow you to tweak each effect, control variables like shadow x- and y- offsets or the midpoint of a gradient without melting your brain. Once you have things the way you want them, you can either cut-and-paste the code or download an HTML file with inline style definitions. CSS 3.0 Maker also displays the browser compatibility for each new tool and takes care of all the vendor-specific prefixing for you. Our only gripe is that in some cases – like border radius – the site ignores the shorthand syntax in favor of defining each element individually, which is usually overkill.
Still, if you've ever struggled to remember the exact syntax of CSS 3's new tools, CSS 3.0 Maker offers a simple solution. As a bonus, if you start watching the code change as you move the visual sliders, pretty soon you'll be familiar with the syntax and can go back to using your text editor.
See Also:
