Azharkamar.com

20 Useful CSS Tools You’ll Need

Tools
16 Jul 2011
Comment

Cascading Stylesheets are one of the many things we designers and developers encounter in our daily quest to rule the web. Without style, everything would obviously look dead boring and similar, and so will websites.

What software do you use to write codes in your CSS files? I’m pretty sure most of you are using Dreamweaver. I fire up Dreamweaver at least 5 days a week and everytime I do so, CSS-coding would be in the agenda.

Dreamweaver does a pretty good job in suggesting CSS properties and values, but that’s about all that it does. Even worse for me, I’m still using Dreamweaver CS3, so it does not have support for CSS3 properties suggestions (I believe Dreamweaver CS5 has). So that’s when I use my favorite online CSS3 tools to help me with my tasks.

Enjoy this roundup of 20 brilliant CSS tools that will help you web designers and developers out there. There’s a handful of such tools out there but these are my favorites.

CSS3 Generator

CSS3 generator is my most used tool for manipulating CSS codes. It covers almost every property for CSS3 and implements a very useful interface where you can instantly preview your inputs. Browser compatibility information is also provided.
css3-generator

CSS 3.0 Maker

CSS 3.0 Maker is pretty much similar to CSS3 Generator, just that former has a neater user interface.
css3-maker

Ultimate CSS Gradient Generator

This powerful tool by Colorzilla allows for very detailed editing of gradient backgrounds. They’ve got a Firefox addon too.
css-gradient-editor

Color Scheme Designer

If you ever need inspiration on color schemes, Color Scheme Designer pretty much does all the thinking for you.
color-scheme-designer

The 1KB CSS Grid

1kb-css-grid

Variable Grid System


variable-grid-system

Grid Generator

grid-generator

Button Maker

CSS Tricks has got this handy button maker where you can create professional-looking buttons simply by using CSS3.
css-tricks-button-maker

CSS Menu Maker

css-menu-maker

My CSS Menu

my-css-menu

Tabs Generator

tabs-generator

CSS Type Set

css-type-set

Type Tester

type-tester

Font Tester

font-tester

CSS Font and Text Style Wizard

css-font-text-style-wizard

Clean CSS

I use this simple tool to clean up and optimize my messy CSS codes and it works great.
clean-css

CSS Formatter and Optimiser

css-formatter-optimizer

Code Beautifier

code-beautifier

Sprite Box

sprite-box

CSS Sprites

css-sprites

Author - Azhar Kamar

Write a Comment! NOW! :)