here’s the scuttle, I have a request to rounded corner buttons with gradient backgrounds in IE 9 specifically and not using images if at all possible because we want to be able to change the dimensions. But, as seems to always be the case, IE fails a simple task. And yes, this has to be IE 9.
So, so I looked at SVG and that would probably work but here’s what I would like to do.
I’d rather use a transparent alpha channel png that is a 40-50% grey to 10% grey gradient and then assign a background color behind it. but there is the scaling issue. Is there a way to do alpha channel like transparency with SVG? I know there’s opacity, but it’s not letting the background color show through.
I had a play around with the gradient filters in IE9 and it can do transparency but unfortunately it kills the border-radius. Then I had the idea to fade the gradient at the top and use in inset box-shadow to create the round illusion and you can get reasonable tab effect.
In the “and this is why we can’t help you” category could we see a image of what it is you are trying to achieve, and the actual CODE that isn’t working for you?
Of course, which directions do you want to change dimensions? What type of element are you applying this to? What’s the background? You mentioned alpha, is that to show through what’s behind your button-type element?
Though I could probably manage what you are trying to accomplish, with it dynamic, with it working all the way back to IE 5.5 USING images, but that’s what I do…
But without seeing what you are trying to do, the code that is failing for you, and what type of element you are attempting to apply said styling to… we’re pretty much guessing wildly in the dark!