Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

CSS gradients not clipping to rounded corners - non-scripted

I am having a bit of a problem with some CSS3 styling. I am trying to make three tabs next to each other that each have a linear background gradient applied to. On top of the gradient is a border-radius to the right so that have a rounded edge to them.

The whole tab bar has one gradient that goes across the entire bar in the background.

Now, the problem is that as you progress through my web pages the colour shading of the background gradients on each tab change to a lighter shade to highlight where you are in the journey. Obviously the first tab's gradient will stretch as far the edges of my rounded corner which is what I want but the second tab next to it which also has the lighter shaded gradient is being clipped off on the left as the previous tab is rendered as a square container and is picking up a snippet of the background gradient. Below is a URL for a screenshot of the problem.

https://rcpt.yousendit.com/1238426562/b75c5ab30c521e6f36514b228deca551?cid=tx-02002207350200000000&s=19104

What I want to do is somehow remove the left edges which inherit the background gradient and use the lighter shaded gradient instead that is set in the tab. Also, would prefer a non-script solution that is CSS based.

Any answers to this problem will be greatly appreciated!

Thanks -JaXL

Example of the code used is below:

CSS

ul.steps {
    background-color:#121A3C;
    background:linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(11,66,123)), to(rgb(19,26,60)), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-moz-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    background:-o-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    display:inline-block;
    width:100%;
    font-size:1em;
    color:#76859C;
}
ul.steps li {    
    padding:4px 20px 4px 8px;
    -webkit-border-top-right-radius:20px 20px;
    -webkit-border-bottom-right-radius:20px 20px;
    -moz-border-radius-topright:20px;
    -moz-border-radius-bottomright:20px;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-right:1px solid red;
    font-size:1.1em;
}
ul.steps li.highlight-lightershade {
    background-color:#3A8ABD;
    background:linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(34,67,132)), to(rgb(25,54,116)), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-moz-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    background:-o-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    color:#FFF;

Open in new window


HTML

<div class="content">
  <ul class="steps">
    <li class="highlight-lightershade">Link 1</li>
    <li class="highlight-lightershade">Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

Open in new window

0
JaXL
Asked:
JaXL
  • 4
  • 3
1 Solution
 
Jen0910Commented:
I'm thinking it's not that the borders are not working, it's that the button needs to be slightly behind the other one for the lighter gradient to show up underneath. You'll need to throw in some positioning to move your buttons over to the left so they appear behind the curved edges of the button to it's immediate left. Can be done in your css. possibly something like:

ul.steps li.highlight-lightershade {position:absolute; top:0; left:-15px;
background-color:#3A8ABD;
...
}

Open in new window


You'll also need to add some z-indexes to the buttons to get them to layer properly, and if you're really picky, since all of the lighter items are going to be 15px to the left, you may need to increase their individual sizes by 15px to make sure it still aligns to your design properly.

Hope that helps!
0
 
WizardOfOgzCommented:
I c&p'd your CSS and HTML into a blank HTML 5 page, but it doesn't look anything like the image.  If you can post a working example I'll take a look at it.  Fiddles are always good for these types of things ;) http://jsfiddle.net/

In general I agree with Jen1910, but I wonder if using relative positioning might be better.
0
 
Jen0910Commented:
Relative positioning with negative numbers can have some z-indexing issues and goes nutty especially in IE. Since it's all inline and in one small place, absolutes should be fine for this case, but it really depends on how many older browser you want to support, and if you want to support IE (eek).

There is a jquery script you can use to help with z-indexing issues, I can share that if you want to try relative positions :-)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
JaXLAuthor Commented:
@Jen0910: Thanks for information.  Are you at all able to give me a better working example of what you have in mind.  I have set-up a JFiddle link (which you see further down this thread) to play with.  At the moment  I'nm trying to steer away from the JQuery route and try and do this with pure CSS if I can.

@WizardOfOgz:  JFiddle link - http://jsfiddle.net/8tLJL/
0
 
JaXLAuthor Commented:
@Jen0910: I'm only limiting this to recent Webkit, Mozilla and Gecko browsers (Safari, Firefox and Opera) so thankfully there is no concern in making it compliant with IE
0
 
Jen0910Commented:
If you know exactly what size your links will be, you could use absolute positioning al save a few steps, below uses relative since i see the text wasn't final ;-) It's not the best but it's worked around what you already had. You can merge some things together if this is what you were trying to achieve.

ul.steps {
    background-color:#121A3C;
    background:linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(11,66,123)), to(rgb(19,26,60)), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-moz-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    background:-o-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    display:inline-block;
    width:100%;
    font-size:1em;
    color:#76859C;
}
ul.steps li {    
    padding:4px 20px 4px 8px;
    -webkit-border-top-right-radius:20px 20px;
    -webkit-border-bottom-right-radius:20px 20px;
    -moz-border-radius-topright:20px;
    -moz-border-radius-bottomright:20px;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-right:1px solid red;
    font-size:1.1em;
    display:inline-block;
    position:relative;
    float:left;
  
}
ul.steps li.highlight-lightershade {
    background-color:#3A8ABD;
    background:linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(34,67,132)), to(rgb(25,54,116)), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-moz-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    background:-o-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    color:#FFF;
    padding-right:15px;
    padding-left:15px;
}

#one {position:relative;top:0;left:0;z-index:12;}
#two {position:relative;top:0;left:-8px;z-index:11;}
#three {position:relative;top:0;left:-8px;z-index:11;}
    

Open in new window


<div class="content">
  <ul class="steps">
    <li class="highlight-lightershade" id="one">Link 1</li>
    <li class="highlight-lightershade" id="two">Link 2</li>
    <li id="three">Link 3</li>
  </ul>
</div>

Open in new window


Is there a reason you have decided to not support IE?? Unfortunately it's still a large section of the market :-/ boo!
0
 
JaXLAuthor Commented:
Thanks Jen0910!

Is there a way of making the middle tabs have re-usable CSS for say I have a Link 2b and Link 2c in between Link 2 and Link 3?  I may have an unidentifiable number of links and by numbering the id's individually means that a specific style is being set on each LI.  If there was some way say first link - one style, middle links - another set of styles and last link - different style.

Probably asking the impossible but be interested to hear if it is even if it means writing the HTML differently to accommodate it.
0
 
Jen0910Commented:
That may take some tinkering for CSS only (if we can get it at all) because in order to get the lighter shade to appear behind the curved corners of the button to it's immediate left, we need to give it a different, lower, z-index then the one on it's left. It needs to be behind it, so reusing the same class will not work. You can give all of them the same positioning and padding to rid yourself of a few CSS lines in the #one, #two, etc ID's but the z-index issue will still apply, that is what solves the layering problem.

I know you mentioned you wanted a non-scripted option, but i imagine there may be a JQuery solution to assign z-indexes to each individual LI item without having to create different classes/id's for them.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now