feb 24 2012
CSS3 lets us build really nice looking things, but let’s face it, the code does tend to get at bit bloated, when we have to repeat everything for each vendor prefix. Apparently, vendor prefixes are also hard to remember, given the current debate on certain browser vendors’ plans of implementing the –webkit prefix. Or maybe some developers are just too lazy writing all that code? Nonetheless, some parts of the CSS3 syntax is also really hard to remember. At least I have a hard time remembering the syntax for CSS3 gradients.
However, I am getting really good help from a handful of online tools. They do a great job of remembering the syntax for me and making other tasks a bit easier as well. Here is a list of the online CSS generators, I use the most.
Repeating every property for every browser vendor can be a pain in the neck. Just write the standard CSS3 properties and then paste them into either Prefixr or –prefix– my css. They both take care of the necessary prefixes, outputting the code for you to copy and paste.
Don’t remember which prefixes are necessary for box-shadow or border-radius? Try creating your CSS3 effects with this handy tool.
This gradient generator makes it really easy to create gradient backgrounds, minimizing your need of Photoshop for the same purpose. It includes all the necessary prefixes. Copy and paste, and you’re good to go.
This color generator actually does nothing in terms of CSS3. It just makes life a lot easier, when it comes to finding lighter and darker hues of a certain color.
If you are not yet ready to write your own or just want to make it easy, Dan Eden’s Animate.css is a collection of CSS3 animations for you to pick and choose from. If there are none you like, he has even made it easy to create a custom build, so you don’t even have to write a single character by hand.
Gridpak is a reponsive grid generator for making fluid layouts, complete with media queries and ready for mobile. Mathematical skills are not needed here, because it calculates the gutter– and column widths on the fly.
Do you use any great online CSS tools or generators, you would like to share? I’d like to hear about it.