CSS - Tabs Labels

Skewed Navigation tabs, rounded corners, jquery select

by Ben Clayton

HTML

<div class="navbar">
    <div>HOME</div>
    <div>INFO</div>
    <div>CONTACT</div>
    <div>THE VERY BIG TEAM</div>
</div>

CSS

body {    font-family: Arial}

.navbar div {
    display:inline-block;

    min-width: 80px;
	height: 30px;
    margin:0px 0px;
    padding:10px 5px 0px 5px;
    
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    -webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);

    text-align:center;
	background:#FFD0D0;
}

.navbar div:hover {
	background:#FF8080;
}
.navbar div.selected {
	background:#FF4040;
}

JavaScript

$('.navbar div').click(function(){
   $('.navbar div').removeClass('selected');
   $(this).addClass('selected');
});

//http://css-tricks.com/video-screencasts/23-conditional-stylesheets/?play=true