Paul Irish

Great site but it makes my IE6 crash :(

Yay!
That's cool. Now use jQuery from Google's CDN, merge all plugins into one file, minify it and put all the script tags on the bottom of body tag ;)

Rock on, Paul. That's some extra-spicy hotness you've got there! Beautiful job. Will make my super-fancy styling much faster now.

Great work!

but where’s the theme-song? ;-)

This is CSS heaven sent! As long as it stays up to date, this is really going to make life easier. Also, love the (shift) up/down arrow keyboard shortcuts. One criticism would be the color choice; being able to have a white background would be great. :)

Awesome! Of course, I went ahead and tried to break it:

- Any support for ellipitcal border radius? Webkit Mozilla syntax differ.
- Howz about inset box-shadows? Mozilla & Opera both support these.

How about support for tabbing to the next property? Other than that I like it so far.

I wonted to build something similar with pure CSS, something like CSS3 framework. But I realized that make no sense building CSS framework for CSS3 effects because is not dynamic. But with little javascript(jQuery) you resolved this issue :). Great work!

wow, this is really gread - and inspiring!

One thing you could add is rgba background color. IE can fake it with the gradient filter.

Good job!

Cool! So would this become like CSS zen garden and you can customize a whole page? Or just the box?

Externally useful for cross-browser rapid css dev

That is really cool, but I agree about the colors. I can't read some of the blue text on the dark background at all, though I think part of that is the absolutely horrendous rendering of the font.

Nicely done! It's missing border-image though ;-) …
http://www.w3.org/TR/css3-background/#border-images

Awesome! Great concept and implementation! The design rocks too. I'll spread the word.

My god. This is awesome.

It doesn't work if you use RGBA for the colors. :-)

Fantastic job guys. Especially impressed when, out of habit, I used the arrow keys to change the value… nice. Would like the option of a white background tho :-) Thanks again!

It would be great if you got a preview of the css like this site does for rounded corners: http://border-radius.com/

@Bobby Nevermind, I'm really dumb… It updates the logo, didn't notice that…

Will you be including any -khtml- rules?

Damn brilliant! It's like a million random CSS3 blog posts jammed into a single kick-arse tool - I can feel the CSS3 start flowing through my veins! I better see a doctor about that.

Great tool!

But it would be great if it would have a white background instead — its much easier on the eyes!

If you really don't want to do that, you could at least improve the comments contrast.

But all in all: Excellent work! Thank you!

Great idea, it would be great if it support rgba in instead of only hex (i know their is the rgba rule as well, but for things like boxshadow I use rgba.

Thanks

Great !! and we don't matter IE6, he's dead :)
Thanks very funny and interisting!

great.. thanks very interesting :)

That is one very excellent tool. I agree with an earlier comment about the comment colour making them difficult to read, but otherwise it's very very cool!

Amazing. Thanks so much for the interesting article. I've been intimidated by CSS3 for a while now and now I think I love it.

great tool!
thanks

I started working on something similar to this last weekend…

http://css3generator.com

Just didn't quite have time to finish everything I wanted. Hoping to add live preview, tips and example code soon.

I love your version tho. Great job!

Real nice !

Two suggestions:

1. Ability to save and send url with specific settings to someone
2. Ability to use several shadows, I'm not sure it's working, for ex.: -moz-box-shadow:0 15px #FFFFFF, 1px 5px 10px #777799;

Keep up the good work !

man, thats awesome!
thank you, and everybody involved in this project, very much, just what i needed.

great work guys!!!

This is indeed useful!

I miss IE6+ working version. Even if only toggling on/off would be great. I don't really care for the editing part to work there.

It is a tedious task to copy the styles and test by hand. But it's nice to have this as a reference! =)

When entering a shorthand hex value, such as #000 for black, it replaces it with #0000 causing NaNs in rgba()

Just a heads up!

Nice work! Looking forward to the updates :-)

Simply Superb! I m loving it!

Love this page. Doesn't fill stuff in like I imagined from the teaser text at top. But I've used this a bunch of times since Friday. Thanks!

great interface

In Firefox and Webkit, the RGB value in box_rgba is always applied and the RGBA value isn't, so no transparency is visible. (It works in Opera) There's also an error in the formula that converts between them (comment #40).

Rotating the box makes it lose position:fixed in Webkit, is that a Webkit bug?

This is excellent, although where were you a week ago Mr Irish!?! I'll use this in my next project instead :)

I don't see all property in IE8
gradient and rgba are OK
.box_shadow just make a text-shadow effect
.box_rotate just make the text look better (antialiasing)
and offcourse there is no rounded corners

Did i need something more than the browser itself ?
For information my version of IE8 : 8.0.6001.18702

Awesome work! Thanks for making it publicly available!
Gradient doesn't seem to work in FF 3.5.2. :(

Great tool Paul, keep it growing.

Maybe the

text-shadow

could be implemented there also?

Wonderful, useful resource for me! Thank you!!!

That's a really great resource. Four things, though:

(1) You've listed box-shadow as a supported property in IE9. Is this accurate? I haven't seen this confirmed anywhere.
(2) IE has supported @font-face with EOT since IE4+, not IE6+.
(3) How about a really simple section for the opacity property?
(4) Shouldn't you specify trutype fonts as working in FF3.5+?

Loving it, nice way to display it.

keep up the good work.

Thanks for the shout out Paul.

Nice work and love the little things you've done, mouse scroll to increase/decrease the values is a nice touch.

Fantastic idea, love it…
The displayed block on the right doesn't seem to work all that well in IE8, but the rules are all correct and that's what matters.
I'm sure I'll be using this on my next project. Thanks!

A tweak to .box_shadow (based on your default values), as I think Microsoft's Shadow filter is the one you want (since Dropshadow results in a solid block of color). Try:

    filter: progid:DXImageTransform.Microsoft.shadow(Color='#ffffff', Direction=180, Strength=4);
    -ms-filter: "progid:DXImageTransform.Microsoft.shadow(Color='#ffffff', Direction=180, Strength=4)";

These also function as a rough equivalent to text-shadow for all child elements if the filtered element has no defined (solid) background-color.

Excellent

The firefox gradient values are backwards. The gradients run the opposite direction from shown on Firefox.

Was just about to write that the firefox gradient values are reversed, which Ted also wrote, but you can also just switch the "top" direction to "bottom".

-mpm

Fantastic tool! Any plans to add text-shadow as an example?

-dti

Awesome! Thanks for posting this!

This a fun and an intuitive way of learning CSS 3.0. I thank you for doing such a wonderful work.

Don't work on Opera 10.10

Fantastic tool.

Though the rgba control needs looking at in Chrome.
It applies NAN values too easily.
It may be better to use 00 when NAN would be the result.

Also IE drop-shadow filter usually looks rubbish, but a better effect can be obtained using the glow filter instead.

Useful piece guys.

OMGWTF I love you.

please tell me you aren't already a father cause I would like to bear your children.

Thank you.

I was having issues with the transparency solution you had for IE8. For some reason it would always come up as a solid color, even though it'd be transparent in ie7.

This is what I ended up using to get it to work in ie8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

this actually rules - thanks guys!

The solution you've shown for rotation in IE leaves much to be desired.

1) BasicImage can only rotate in 90deg increments. So you're provided example of 7.5deg doesn't do anything at all in IE.
2) The Matrix filter offers a much more robust rotation framework.
2a) The calculations from degrees to a matrix are ugly.
2b) The transform-origin in IE is defaulted at something other than 50% 50% like moz and webkit.
2c) IE lets you set the transform-origin (Dx and Dy) but that means it won't properly re-size the bounding box. It's either/or.
2d) IE transforms without including padding and border which further confuses the transform-origin.

It's not exactly possible to do a direct cross-browser rotation. Here's a complicated article that someone should re-write into English.

http://someguynameddylan.com/lab/transform-origin-in-internet-explorer.php

Great job on this tool, Paul. What kind of traffic have you been getting on that page? I imagine quite a bit, as it's been tweeted and shared quite a bit in the community.

FYI - About a month before you released your tool I had put up a CSS3 "click chart":

http://www.impressivewebs.com/css3-click-chart/

But yours is so much more useful! Thanks again.

The problem with the box-shadow equivalent in IE using their own proprietary filter is that the shadow itself is counted to the total width of the element. So if you have a 'strength=7' value on all sides of the box it will consume 14px vertically and horizontally.

Anyone who managed to solve this? I think it can be done using positioning but I doubt it's practical.

can this be used to create pure css-tabs ? (without worrying about flaring out the bottoms of the tabs, which would be even cooler) I could use color & font changes to handle the current tab.

Nice. Good work! Does it mean the end of photoshop? ;)

Yay! Wicked!

Brilliant. Huge thanks for writing this and making it available.

Cool. It'll help a lot to get to grips with the new stuff in CSS3.
Congratulations.

Hi Paul, really great and clean solution! And thank you for playing area at the bottom of this page! ;-) Relaxing!

Nice work. It's nice to find people like you on the net. Thanks, keep up the great work.

Hi Guys, I'm excited about the possibility but I'm looking at http://css3please.com/ in IE6-8 and don't see the shadow working. The gradient will work if I toggle the shadow style. I couldn't get rotate to work. Am I missing something? Nice work so far.

FYI, The gradient rules for IE don't work. They use

startColorstr

and

endColorstr

. These should actually be

startColorStr

and

endColorStr

(CamelCase). See MSDN documentation.

Thanks for all the work. It's a mighty handy tool!

Great site.
Why hasn't microsoft introduced this CSS3 feature yet?

Gradient for WebKit seems to be reverse of other gradients (i.e. bottom to top instead of top to bottom)

Hi there,
Nothing about column-count, column-gap and that kind of stuff?
We miss them!
=)

I would love to see the ability to switch between top-to-bottom and left-to-right gradients. IE can do this according to http://www.scriptfx.com/transitions/gradient/gradient_filter.htm

thanks for sharing !!!

Thanks for sharing ! Great ressource I always keep around when I'm coding…

I was just wondering how can you calculate the degrees for the ie box rotation ?

Very cool! It would be nice to get rounded corner settings for each individual corner for when authoring tabs (i.e. only 2 corners rounded) since these settings are also not consistent across browsers.

Box gradient wasn't supporting rgba values. Any idea why?

Hey Paul, great tool, thanks.

Can I suggest a tiny little fix? The rotate filter breaks subsequent css for IE6, but it seems to work if you reorder the matrix array, putting sizingMethod at the end of the M values, rather than before.

Thanks!

Brilliant work.

Thanks a lot for this useful tool.

Hi, the CSS3Please is great and useful, but as I use TextMate, i thought it would be even better if I could generate the snippets right in the editor (even loosing the ability to preview it). So I've packed the snippets into a simple bundle and here it is:
http://github.com/filipepina/CSS3-Please-TextMate-Bundle

I've made it two weeks ago and i think you have changed a few things regarding IE, I'll change that later!

Sorry, didn't check for all comments and feedback, just a quick feedback. If I use the filters for IE7 (corrected to be single line), the whole css get's fucked up.

Beside this… really handy site, I use it quite often, thanks..

For the missing CSS3 for IE like dropshadow, textshadow and border radius simply implement this .htc file in your CSS.

http://fetchak.com/ie-css3/

Your site is damn nice — many thanks!

It shows very clearly how CSS3 will make _my_ life easier.

In order to make the MS transparency filter work for IE8, you will have to set background:transparant before declaring. Remove the background-color declaration.

Great tool i love it thanks for the hard work

awsome! thans for your hard work.

Thanks!

Is it possible to add more color stops?

@Paul Irish
http://wiki.github.com/heygrady/transform/correcting-transform-origin-and-translate-in-ie

I've started on a jQuery plug-in that does the transformations cross-browser. I've managed to approximate support for transform-origin in IE using the sylvester.js library. It work's perfectly in my testing down to IE6. I've posted an article about how to make IE behave and have a standard transform-origin.

WOW! Great tool!
I like your tool and came here to say grats…but, wow! what an amazing effect on your background!!!
I simply gave up! Keep up the good Job!

-Shahab

How do you get box shadow not to stretch your page out? I have a div that stretches 100% of the page's width and when I add box shadow it stretches it the length of the shadow. Please Please help, I really do apprecieate it. And I LOVE your site, it's amazing.

Thanks for the great site! I would appreciate support for gradients with multiple stops.

Very nice job man! Keep going!

I just loooooved this :)

Just a heads up, at least on FF 3.6.3 when I set some values for the alpha channel in rgba() like 0.9 or 0.7, it returns NaN.

Also, the hack for this to work in IE8 doesn't really work on mine (Win7). This is what I used instead:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)";

Hope this helps :)

Again, great work, man! Keep it up!

repeating the usual, awesome. Thank you very much.
and nice work on this site too, the mouse moment swirls. cool !!

Thanks for posting, a nice all-in-one CSS 3 reference for common task.

Thia is AWESOME! I took a break from web work for just a bit and suddenly I found I need to learn CSS3 (& HTML5) and I was shaking in my boots. I was a Queen in the CSS2's & XHTML, but was lost with CSS3 and different browser requirements. I thought I would have to give up, but you've made it make sense to me when no one else could. I can't thank you enough. I'm back to learning, but now need to know just how I can make my site fit a hand held, a netbook, a 1600 by x, etc. Thanks again for getting me back on the road the learning again; I loved it before and then got lost. Now I'm found. YaY!

You've made the web a better place. I am writing much better code now and am going back over code I've written and easily update my incomplete CSS by dropping my settings into your code and retrieving the cross browser results.
Will definitely subscribe to this page in my reader so I will be notified as soon as there are any updates. You have made me a better netizen.
Aside: Would love to know how you make it so I can Doodle in the margins.

@Michael O'Neal Found the answer to the Aside at http://paulirish.com/2010/my-harmonious-background-canvas/

I share Nancy´s opinion: Greatest Tool ever for intuitive code work! Thanks a lot, i adore it!

Interesting: I just tried to use the IE-Filters for a rotation-Property on my portfolio-Site alexweb.info. IE8 behaves like it should, but in IE7 all my other scripts (cufon an jquery) are destroyed, and the filters don´t work either. That´s not bad, for the effect must´t be seen in the IE´s - Progressive Enhancement. It´s just always testing on the web.

Interesting No. 2: The Rotation by IE-Filters ist not quite the same like with just CSS3: The latter rotates the object (an img-Tag in my case) around its middle point, whereas the IE-Filter takes the upper right corner of the object as the fixed point for the rotation. Did you realise this difference?

All important CSS3 features on one page, thx for sharing that overview Paul!

Great site!

I was wondering if there is an equivalent for CSS2?

I couldn't get RGBA working with your syntax, but I got it working in IE 6, 7, and 8 using the following syntax:

.shadow {
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#33000000,endColorstr=#33000000);
background: rgba(0, 0, 0, 0.2);
}
 
<!--[if IE]>-->
 
 .shadow {
 background: transparent;
 zoom: 1;
 }

And how about adding a text-shadow property for modern browsers and IE.

Hi,
i need to put some dropshadow to div- (and perhaps table-) elements.
The Defiitions from your generator work quite fine in Firefox, but i cant geht the shadow to work in IE8, even with the .htc-file mentioned in the comments or the
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')"

Definition. The shadow does never appear in IE.
Is it necessary for the element which should get the shadow to have a fixend width ?
I'm sorry that i could not provide smaple code but i have to use this to "modernize" some extranet-website which was developed 10 years ago in IE-Only-Fashin and now should get some new layout, and cross-browser-support (finally some doctype, yay!)
As mentioned before the Filter does not show up and even this developer-Gadget in IE does not show it in the css-area.
I'm using windows 7 as OS, in case this is important…
any ideas?

Thanks in advance,
Ge0rgy

@Fredrik Carlbom

unless i'm mistaken, the tool itself makes no claim to run in IE6, but rather to generate cross-browser css. best to run the tool itself in a modern browser like FF or chrome or ie8. am i correct about that?

i DO hope the authors will sneak in more IE6 generated css!

There is no eot fonts on the @font face rule, So IE is ignoring it all!

The goal of most web designers is to get their design to work in IE so if you could make your rules more cross browser compliant it would be better.

This has been very handy. Thanks!

What is the support for alpha gradients? You could do some nice stuff with alpha gradients..

This tool is awesome! You have really done your research on this. I know of no other tool that makes it so easy to create slick CSS3 snippets so easily. Can not wait to see what else you add to this tool.

I was just experimenting with the background gradient feature. I wanted to create a gradient with a transparency, and it turns out that it is easy to do by using rgba colors instead of HEX colors. This is awesome! I tried putting rgba colors into css3please, but rgba colors do not get interpretted correctly. When I put in rgb colors it converts these to HEX just fine, but obviously rgba colors cannot be converted since there is no transparency version of HEX (I wish!).

Anyway … would love to see support for rgba in a future version if it is not too much work.

Fantastic! Thank you or your great work!

Is there any way you will also be covering the box-sizing values, like the CSS3Generator?

.box_rgba {}

/* IE 8 comment isn't closed. Fix please!

Also thanks for a great css cheat-page!

hey, nice work!
but I've got a problem using gradient for the background of a page. I put the code from css3please.com and used it as background of the . this works fine as long as the viewport is bigger than the content, if i had to scroll the gradient is shown as patterns. only the beloved IE8 does it right.
Ideas someone?

Greetz

I love the css3please.com site and makes my life easier… just curious why you do not use the -o- extension for opera? Perhaps it should be added, or is it not necessary?

You are my new hero. CSS3please is… absurdly brilliant. And I thought rounded corners were the future.