Remember when CSS 2.1 caused you a big hassle when trying to make a simple rounded corner shape?, and how much effort and time it took to produce it exactly as desired from Photoshop, and how heavy the shadowing effect is on your server’s bandwidth?!
With CSS 3 the hassle is all gone, CSS3 holds in it’s sleeve more than 100+ new properties that will save you much time and effort, and it will significantly reduce your website loading time.
If you’re not too much into the code, it’s not a problem, below we gathered some tools with friendly user interface to help you generating nice CSS 3 code.
CSS 3.0 Maker is a fabulous tool. You can define box radii, gradients, text shadows, box shadows, transforms, transitions and rotations by adjusting a few sliders. A preview area shows the result and indicates which desktop and mobile browsers support the properties.
CSS code can be copied from the Codeview box and downloaded within an HTML file which demonstrates the effect.
Photoshop users will love LayerStyles. CSS3 effects are defined using a layer style dialog which will be immediately familiar to anyone using Adobe products. It’s easy, logical, and a joy to use.
CSS3 Generator uses a wizard-like approach to define styles. Choose from a variety of effects including border radius, text shadow, box shadow, multiple columns, transforms and transitions. Then, complete a few boxes to apply them to the preview element.
CSS3 Generator highlights which browsers and versions support the effect and, where possible, provides IE-specific filter code.
The sandbox has been developed by CSS3 guru and SitePoint contributer John Allsopp. Gradients, text effects, box properties and transforms can be easily adjusted using sliders. The resulting code and preview window is dynamically updated accordingly.
The tool may not be as pretty as some of its competitors but it’s quick and functional. Recommended.
CSS3 Playground has been created by freelance developer Mike Plate. As well as supporting a range of CSS3 properties, it’s the only tool which allows you to preview effects on more than one element and change the content of the boxes. Amazing.
If you want something simple, quick and easy, this CSS3 generator could be the tool for you. It’s one of the best-looking utilities and supports border radius, box shadow, opacity and simple background gradients. You can also request IE-specific filters in the resulting code
CSS3 effects can produce great-looking buttons without images. The CSS3 Button Generator allows you to tweak the font, padding, border, background gradient, inner shadow, drop shadow and text shadows using up/down controls which can be easier and more logical than sliders.
As well as providing cross-browser CSS3 code, the tool allows you to store and share styles with others. You can browse showcased buttons and adjust the properties for your own use.
Button Maker was developed by Chris Coyier of CSS Tricks. Although it was intended as a technology demonstration, that hasn’t prevented it being useful to CSS3 developers!
Button Maker doesn’t support some of the more extreme CSS3 properties but it’s one of the only tools to show hover effects.
If pushed, even I can recall the text-shadow property. CSS3 gradients? No chance. Gradients may be powerful but they’re convoluted and, until recently, webkit browsers used a different syntax. Unless you’re creating a very simple background, a gradient generator is essential.
The Ultimate CSS Gradient Generator is, well, the ultimate gradient generator. It uses a similar interface to Photoshop and creates cross-browser code which includes IE filters. Finally, gradients can be saved and shared with a unique link. You’ll definitely want to bookmark this tool.
If the Ultimate CSS Gradient Generator is too much effort, you might prefer this alternative. The tool allows you to create linear gradients by adding colors at any number of stop points. The old webkit syntax is produced as well as Mozilla code which should be compatible with other browsers.
If you’re new to CSS3, the above tools will give you a stong push in the cool world of CSS, CSS is the magic of web, if you have any tools share us the link in the comments.