Solved

CSS gradients not clipping to rounded corners - non-scripted

Posted on 2011-09-28
8
382 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
  • 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
 

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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 a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to dynamically set the form action using jQuery.

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now