Tool Bar Tabs

by niki4810

HTML

<div class="toolBar">
    <ul class="toolBarTabs">
        <li class="toolBarTabsLeft"></li>
        <li class="toolBarTabsRight">
            <a></a> 
        </li>
    </ul>
</div>

CSS

.toolBar {
    position:relative;
    height:30px;
}
.toolBarTabs {
    margin:0;
    padding:0;
    height:100%;
    background: #feffff;
    position:relative;
    left:0;
    right:0;
    top:0;
    height:30px;
    border-bottom:1px solid #d8d8d8;
    margin:0;
    list-style:none;
    /* Old browsers */
    background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feffff), color-stop(100%, #d2ebf9));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #feffff 0%, #d2ebf9 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0);
}
.toolBarTabs .toolBarTabsLeft, .toolBarTabs .toolBarTabsRight {
    position:absolute;
    height:100%;
    top:0;
}
.toolBarTabs .toolBarTabsLeft {
    width: 40%;
    left:0;
}
.toolBarTabs .toolBarTabsRight {
    width:60%;
    background-color:#fff;
    right:0;
    border-left: 1px solid #4096ee;
    border-top-left-radius: 35px 50px;
}
.toolBarTabs .toolBarTabsRight:before {
    content:'';
    width:9px;
    height:8px;
    position:absolute;
    z-index:2;
    bottom:0;
    background: #FFF;
    left:-8px;
    -webkit-background-clip: padding-box;
}



.toolBarTabs .toolBarTabsRight a:before {
    content:'';
    width:10px;
    height:8px;
    position:absolute;
    z-index:3;
    bottom:-1px;
    background: #d2ebf9;
    overflow:hidden;
    border-bottom:1px solid #4096ee ;
    -webkit-background-clip: padding-box;
}

.toolBarTabs .toolBarTabsRight a:before {
    left:-11px;
    bottom:0;
    border-bottom-right-radius:10px;
   ...

JavaScript

background: #feffff;
     /* Old browsers */
     background: -moz - linear - gradient(top, #feffff 0 % , #d2ebf9 100 % );
     /* FF3.6+ */
     background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #feffff), color - stop(100 % , #d2ebf9));
     /* Chrome,Safari4+ */
     background: -webkit - linear - gradient(top, #feffff 0 % , #d2ebf9 100 % );
     /* Chrome10+,Safari5.1+ */
     background: -o - linear - gradient(top, #feffff 0 % , #d2ebf9 100 % );
     /* Opera 11.10+ */
     background: -ms - linear - gradient(top, #feffff 0 % , #d2ebf9 100 % );
     /* IE10+ */
     background: linear - gradient(to bottom, #feffff 0 % , #d2ebf9 100 % );