SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 9, rounded corners and gradients

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I haven't messed around with svg yet but I saw an article here that may be of some use.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Untitled Document

    Needs a bit of testing but could be made to work.

  4. #4
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks Paul! I'll have to check this out some more when I get back into work.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •