Solved

CSS gradients not clipping to rounded corners - non-scripted

Posted on 2011-09-28
8
395 Views
Last Modified: 2012-05-12
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
Comment
Question by:JaXL
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 8

Expert Comment

by:Jen0910
ID: 36716892
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
 
LVL 2

Expert Comment

by:WizardOfOgz
ID: 36720240
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
 
LVL 8

Expert Comment

by:Jen0910
ID: 36814816
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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

Author Comment

by:JaXL
ID: 36815396
@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
 

Author Comment

by:JaXL
ID: 36815643
@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
 
LVL 8

Accepted Solution

by:
Jen0910 earned 250 total points
ID: 36818475
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
 

Author Comment

by:JaXL
ID: 36890620
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
 
LVL 8

Expert Comment

by:Jen0910
ID: 36891675
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question