requested by adambig.gs

Might be a good idea to add radial gradients to the current collection. No current support for Opera, FF < 3.6 and IE < 10 but how about just adding a fallback to linear gradients?

References:

• collection of cross-browser linear and radial gradient examples: http://css-tricks.com/examples/CSS3Gradient/
• -webkit- gradients: http://www.webkit.org/blog/1424/css3-gradients/
• -mozilla- gradients: https://developer.mozilla.org/en/CSS/-moz-radial-gradient
• -ms- radial gradient: http://msdn.microsoft.com/en-us/library/windows/apps/hh453718(v=vs.85).aspx

You can add support for background-size in Internet Explorer with this rule:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.path/to/img1.jpg', sizingMethod='scale');

for 2d transforms.

sure why not.

I'm thinking that most people will want background-clip: padding-box when using border-radius with a border. I think it should be a browser default, but until then...

.box_round {
-moz-border-radius: 12px; /* FF1+ /
-webkit-border-radius: 12px; / Saf3-4, iOS 1+, Android 1.5+ /
border-radius: 12px; / Opera 10.5, IE9, Saf5, Chrome, FF4 /
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box; / Keeps bg color from leaking outside border */
}

would be wise.

I can probably wrangle a pull request together if I can figure out how to pull the most recent commits into my repo. But give me a green light before I do that work.

demo fiddle:
http://jsfiddle.net/matthewlein/ryywZ/

Adding background-clip: padding-box; makes the background stick outside of the rounded Corners in Opera

The initial state of css3please.com has the background sticking through (Tested with Opera 11.11)

Removing this property fixes the issue... but it is there so the background doesn't leak.

I've read in a few places to use -khtml-border-radius for border radius on some linux browsers I presume the K stands for Konqueror? I did a quick Google and it appears to be old version of Konqueror used this and one site even said early implementations of webkit used it.

there's gotta be some extra stuff in here that need tickets / addressing:
http://paulirish.com/2010/introducing-css3please/#comments

would love help gathering those. (work from the bottom up)

I don't think that zooming is in the official specs it would make a good addition since it's doable.

 .box_zoom {
    zoom: 1.5; /* IE */
    -moz-transform: scale(1.5); /* Firefox */
    -webkit-transform: scale(1.5); /* Safari & probably Chrome */
}

Code from: http://stackoverflow.com/questions/2026294/zoom-css-javascript/2026384#2026384

It would be nice to have a Settings dialog where you could select which browsers to add prefixes for.

If you don't want IE filters, you uncheck the IE option, if you don't care about Firefox <4 you only get the unprefixed border-radius, etc.

If you think this is a good idea, I would be willing to at least start looking at implementing it.

from @mahemoff

would be fascinating if #css3please released stats showing what properties people are tweaking

EOM

i figure we can just have a link to toggle and it switches vert to horiz.

from http://paulirish.com/2010/introducing-css3please/#comments ...

IMPORTANT!!!

Rotate will NOT work cross browser, in IE9 both -ms-transform and filter will be used. Result will be that if you rotate 90 degrees, IE9 will actually rotate 180 degrees, because it just rotates twice!!

So, solution could be, leave out -ms-transform.. problem with this is: do context menu -> print preview, when you print the webpage it will NOT rotate!!

test page: http://jetibest.site90.com/stackoverflow_example.htm

Hello!

The tricky part in the box shadow is the direction, but it can be calculated using this: http://stackoverflow.com/questions/3967238/javascript-formula-to-get-direction-from-x-y-coordinates
I hope you'll find it useful. I made my own fallback using less, but the direction is still missing (only using math functions which less lacks):

// Box Shadow
.boxShadow (@Hor: 3, @Vert: 2, @blur: 5, @shadow: #757171, @dir: 34 ) {
-webkit-box-shadow: e(%('%spx %spx %spx', @Hor, @Vert, @blur)) @shadow;
-moz-box-shadow: e(%('%spx %spx %spx', @Hor, @Vert, @blur)) @shadow;
box-shadow: e(%('%spx %spx %spx', @Hor, @Vert, @blur)) @shadow;
filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%s', Direction=%s, Strength=%s)", @shadow, @dir, @blur));
}

http://www.xs4all.nl/~peterned/matrices/

kinda want this.

Should be added to the comments in the box-shadow section, as it's one step out of the vendor prefix mess

A huge hesitation on the usage of CSS3 is with older browsers such as IE7-IE8 (and sometimes IE9). How about adding CSS3PIE rules in the list? They've got a good list of supported CSS3 features, although sometimes you'll have to put in a somewhat "vendor" specific rule to implement them.

For example the box gradient can be changed to:

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#444444)); 
  background-image: -webkit-linear-gradient(top, #444444, #444444); 
  background-image:    -moz-linear-gradient(top, #444444, #444444); 
  background-image:     -ms-linear-gradient(top, #444444, #444444); 
  background-image:      -o-linear-gradient(top, #444444, #444444); 
  background-image:         linear-gradient(top, #444444, #444444); 
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
   -pie-background:         linear-gradient(top, #444444, #444444);

The -pie- prefixes are ignored by browsers and can easily be turned on for lower version IEs with a conditional js script. But additional Javascript would need to be placed to turn on CSS3PIE, but the mere inclusion of the -pie- prefix on the some of the items would help a lot.

should note that.

http://leaverou.me/demos/cssgradientsplease/

The IE gradient filter doesn't clip to the edges of a border-radius. It stays a box and makes you look foolish. That should be known. Definitely note-worthy.

It seems like you can change it back to 0.6 with no problem, but any other value i tried returns NaN.

... or something weird like that.

shruggg

rom micah synder

On CSS3Please the .box_gradient example uses regular six character hex values for the MS filters instead of their silly eight character AARRGGBB ones. I had an inexplicable blue gradient until I eventually ended up here http://msdn.microsoft.com/en-us/library/ms532930(v=VS.85).aspx and realized the typo.

whoops.

the filters need FF in front of the colors.

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)";

EOM

so basically i am changing it all

cool with that?

so you can do the top two corners rounded and bottom two square (like for tabs)

you toggle between simple (existing) and custom mode.
so that way we dont need to change the UI except for adding a toggle link (that'll hide this one and show the other)
the other just has the corners available one by one.

and thus we can kill border-radius.com.. muHAHAHah

eric meyer pointed out the FF can handle -moz-border-radius: 10px 35px 33px 18px;
so it doesnt need to expand as much as most people do it
but safari 4 needs it broken out..
when we decide safari 4 is dead we can kill off the webkit prefix.

lots of people want to define a whitish background color so they can evaluate box-shadow on diff colors.
i imagine this could go in the bottom right somewhere. a box to change the existing hex color to whatever..
we'd then run this to evaluate whether its dark or light
http://paulirish.com/2009/random-hex-color-code-snippets/#comment-25621
if its light we'd add 'light' to the body class and then change the syntax highlighting theme (we also change the box-shadow color)
otherwise we keep the existing syntax highlighting.

Not sure what they mean:

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

Think they mean alpha doesn't work.

function d2h(d) {
    return ('0' + parseInt(d, 10).toString(16)).substr(-2).toUpperCase();
}

alert(d2h(0)); // should return 00, IE7 return 00
alert(d2h(204)); // should return CC, IE7 return 0CC
alert(d2h(255)); // should return FF, IE7 return 0FF

It seems to be a bug in IE7

The rgba color's "a" isn't working. Anything but 0.5 doesn't work (returns NaN).

this is totally dependent on ticket #1

probably other ie9 issues.

maybe?

i'm not sure how the UI would work.. but it should choose in HSL by default. (i did this basically on mothereffingtextshadow.com)

Adding additional gradient stops creates invalid code for -webkit-gradient and filter

.box_gradient {
background-color: #999999, #444444 30%;
background-image: -webkit-gradient(linear, left top, left bottom, from(#999999, #444444 30%), to(#999999)); /* Saf4+, Chrome /
background-image: -webkit-linear-gradient(top, #999999, #444444 30%, #999999); / Chrome 10+, Saf5.1+ /
background-image: -moz-linear-gradient(top, #999999, #444444 30%, #999999); / FF3.6 /
background-image: -ms-linear-gradient(top, #999999, #444444 30%, #999999); / IE10 /
background-image: -o-linear-gradient(top, #999999, #444444 30%, #999999); / Opera 11.10+ /
background-image: linear-gradient(top, #999999, #444444 30%, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999, #444444 30%', EndColorStr='#999999'); / IE6–IE9 */
}

Line 589 of javascript/javascript.js

trim is an ECMAScript 5 method. Supported in Chrome, FF4+, IE9+, Opera 10.5+, Safari 5. Shouldn't be overriding native methods now should we :)

In Firefox 4 betas, ".box_round", ".box_shadow" and ".box_textshadow" css rules fail be applied once page is loaded. No errors in error console.

Screenshot: http://dl.dropbox.com/u/16283445/screenshot.jpg

Styles do apply, however, if user focuses any rule and then goes out of it.

Issue can be "fixed" by deferred programmatic update of any rule. Place the code:

    setTimeout(function()
    {
            generator.grabAndSet($('pre input').first().get(0));
    },
    100);

right before the

    // use rgba and not gradients for opera since he's silly.

comment in javascript.js. This is a very blunt "solution", however, so I didn't create a pull request with it.

Tested in:

• Firefox 4.0b6 and Firefox 4.0b7 beta releases,
• Firefox 4.0b8pre nightly builds of 3 Dec 2010 and 4 Dec 2010

with clean profiles, no add-ons installed.

Regards,
Dmitriy.

Currently, CSS3 Please generates the following -webkit-gradient code (assuming I entered #abcdef and #123456):

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #abcdef), color-stop(1, #123456)); /* Saf4+, Chrome */

Although color-stops can be useful at times, in this case you just want a horizontal/vertical gradient, so it could be written as:

background-image: -webkit-gradient(linear, left top, left bottom, from(#abcdef), to(#123456));

So what’s the story? Is there a particular reason color-stop is used here? If not, just let me know and I’ll go ahead and change this.

-o-linear-gradient()

Also, -webkit-linear-gradient is supported by “Saf 5.1+”, not “Saf 6+”.

https://github.com/paulirish/css3please/blob/master/javascript/javascript.js#L589

trim is an ECMAScript 5 method. Supported in Chrome, FF4+, IE9+, Opera 10.5+, Safari 5. Shouldn't be overriding native methods now should we :)

In my scenario, I have a styled anchor tag that has a box gradient background and a border radius. In IE9, the filter rule draws the gradient outside the border radius.

need to have this documented in the markup.

i'd love to kill the prefixes by default.

Under certain circumstances the matrix filter will cause IE6 to fail to parse the remainder of the stylesheet. This can be avoided by putting "sizingMethod='auto expand'" LAST instead of first. That is to say:

         filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=120,strength=6)
                 progid:DXImageTransform.Microsoft.Matrix(  sizingMethod='auto expand',
                 M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738);

Will obliterate the remainder of the stylesheet in IE6, while the following will not:

         filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=120,strength=6)
                 progid:DXImageTransform.Microsoft.Matrix( 
                 M11=0.9986295347545738, M12=-0.05233595624294383, M21=0.05233595624294383, M22=0.9986295347545738,
                 sizingMethod='auto expand');

pretty much all done by jon in test_math.html and test_ui.html .. just needs to be integrated into the real UI.

When I copy and pasted the .box_rotate styles at the top of my CSS, none of the CSS would load in IE6 and 7. I just moved it to the bottom of the CSS and everything worked fine.

Here's what I discovered on the weird css rotation thing in IE6 and 7: You must declare at least height or width on the div that's going to be be rotated BEFORE your rotation filters appear in the CSS. Even if you do this, however, any styles applied to that div AFTER the rotation filters appear in the code will not be applied. The same seems to be true for any styles applied to that div's children as well.

…even if you follow the rules I posted a few comments back, you will still totally break your site if you use more than one rotation filter per external CSS file. You either have to have separate CSS files per rotation filter, or simply add each filter nested in its own unique style tags in the head of your html. Failure to do so will only display the first rotated object, but even this will be blurry and at the incorrect angle.

Hilariously, removing the DOCTYPE causes all the rotation to render perfectly, so I'm assuming quirks mode knows how to handle multiple rotation filters? Also, with a larger, more complex stylesheet, there were even weirder side effects, but I couldn't pinpoint what was causing those. Anyways…

Take home message:
Use only 1 proprietary ms filter: (when used for rotation, at least) per external stylesheet. and..

Each rotation filter in your html must be in its own set of style tags.

This means that some of the existing generated CSS will apply e.g. rgba AND filter in IE9. My commit doesn’t fix any of that (although it corrects the browser support comments, implying that this will happen), but it’s definitely something to consider.

A solution would be to use a variant of http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and then do something like .ie9 .rgba { filter: none; } (or filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); in case the former doesn’t work).

from @mathias

So when I press tab cursor jumps to next field instead of some link I don't care.

IE9 applies both the the filter as the -ms-transform , therefor if I want to rotate 5dg, it rotates twice to 10dg. Also the rotation using filter gives a black background.

Now, I just came to know about box-shadow's spread value, which allows us to set one sided shadows (http://jsfiddle.net/Drk72/).
This must go into css3please.

somehow opptional? tricky..