CSS3 generator

There is a bug in the color text fields. When you click on the text field, a color picker opens, but if you tab to the field, no color picker opens, leaving the user confused as to what format the text should be in. The color picker should open on focus and close on blur of a color field. I have seen this with color fields in Box Shadow and Outline, and if there are other color fields in other sections, the problem probably happens with them too.

I also have a suggestion: add a Randomize button to the right of the whole group of text fields (or anywhere else). When clicked, it would populate the fields with random valid values and update the preview. That way, the user can see the effect of the CSS and examples of the correct format to enter values into the text fields. This would be especially helpful for @Font Face, where the labels "Font Family" and "Font Name" don't make it clear what to type, and where putting various values in those fields produce no effect on the preview.

It also seems that some of the CSS you generate will have no effect on the preview at all, no matter what you enter - those sections are just to get the code to copy and paste. For these, I think you should either add movement or external files or whatever to the preview that will show the effect, or just hide the preview in those sections.

Nice, bookmarked, alongside the also excellent http://css3please.com/

Linked from that site: http://www.colorzilla.com/gradient-editor/

Very useful for people terrible at making their own nice looking gradients.

Great stuff! One small nitpick in Chrome 12: Go to Outline, enter values, see what happens. Select "Outset" or "Double" in the dropdown list, and if you move the cursor back to the dropdown, most times you'll hit one of the browser version graphics, sparking off the version display effect. Tiny issue really :)

Other than that minor issue, I really like this!

Just joined to say nice work. As a web designer this will come in very handy. I've actually started to build a CSS3 builder with multiple layers so I can build my PSDs a little easier.

I'm thinking of posting it here when I deem it's at a worthy stage to get feedback. :)

Nice little utility.

If interested, you should add these easing formulas:

https://gist.github.com/983364

instead of riding the hype, this guy actually keeps his site up-to-date (and has been for a while). kudos.

Sleek & Elegant: http://css3.me/

Wholly useless. Doesn't work in IE.