CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jameo
Jameo

Reputation: 4607

achieve this tabbed effect in css

I am creating some tabs for my website, and I am trying to match the design, which used some very uneven lines, which is obviously tricky to pull off in css. Here is a sample:

tabs

Right now I am using bootstrap tabs to achieve the actual functionality of the tabs. Here is my start

http://jsfiddle.net/PJbhQ/2/

.nav-tabs > li > a{

   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   background-image:linear-gradient(to bottom, #fefefe, #dddedd);
  border-bottom: none;
}
.nav-tabs > li.active > a {
   box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
   color: @gray;
   background: #ffffff;
   border-bottom: none;
 }

Any ideas on how to get this curvature?

Upvotes: 4

Views: 583

Answers (1)

chaitan94
chaitan94

Reputation: 2232

Ok here's my very crude attempt at this using pure CSS..

Here's the fiddle: http://jsfiddle.net/PJbhQ/4/

Here's the CSS: 

.nav-tabs > li > a{

    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    background-image:linear-gradient(to bottom, #fefefe, #dddedd);
    //border-bottom-color: transparent;
    border-radius: 8px 20px 0 0;
    border-bottom: none;
}
.nav-tabs > li > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #dddedd 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "null";
    color:rgba(0,0,0,0);
    height: 20px;
    left: 31px;
    position: relative;
    top: 8px;
    width: 20px;
    z-index: 5;
}

.nav-tabs > li.active > a {
    box-shadow: -2px -1px 3px -1px #aeaeae, 2px -1px 3px -1px #aeaeae;
    color: @gray;
    background: #ffffff;
    border-bottom: none;
}   
.nav-tabs > li.active > a:after{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 14px, #999 17px, #fff 18px);
    background-origin: padding-box;
    background-position: left bottom, right bottom, right top, left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

(HTML and JS are the same)

I used gradients for the convex curve as seen from Inset border-radius with CSS3

Hope this helps! :)

Upvotes: 3

Related Questions