css skew for nav tabs

Skewed Navigation tabs, rounded corners, jquery select

by Ben Clayton

HTML

<div class="navbar">
    <div class='nav-tab'><div class='nav-text'>HOME</div></div>
    <div class='nav-tab'><div class='nav-text'>INFO</div></div>
    <div class='nav-tab'><div class='nav-text'>CONTACT</div></div>
    <div class='nav-tab'><div class='nav-text'>THE VERY BIG TEAM</div></div>
</div>

CSS

body {    font-family: Arial}

.navbar .nav-tab {
    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 .nav-text {
    display:inline-block;

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

 }

.navbar .nav-tab:hover {
	background:#FF8080;
}
/* the class name selected to lock the color on is done by jquery*/
.navbar .nav-tab.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