CSS3 tabs

by jitendravyas

HTML

<!doctype html>
<html>
  <head>
    <title>Tabs Sooper</title>
  </head>
  <body>
    <div id="main">
      <ul>
        <li class="selected"><span>Apples</span><sup>23</sup></li>
        <li><span>Oranges</span><sup>42</sup></li>
        <li class="high"><span>Papayas</span><sup>84</sup></li>
        <li><span>Bananas</span><sup>17</sup></li>
      </ul>
    </div>
  </body>
</html>

CSS

body{padding:20px;font-family:verdana;}
ul{margin: 0;padding: 0;border: 1px solid #B6B6B6;color: #4F4F4F;font-weight: bold;list-style: none;border-width: 0 0 1px 0;overflow:auto;}
li{
  list-style: none;float:left;position: relative;margin: 0 3px 0px 0;border: 1px solid #B6B6B6;
  border-bottom-width:0;border-radius:4px 4px 0px 0px;padding:0;white-space: nowrap;overflow:auto;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  background:-webkit-gradient( linear, left bottom, left top, color-stop(1, rgb(237,237,237)), color-stop(0, rgb(196,196,196)));
  cursor: pointer;
}
span,sup{float:left;vertical-align:baseline;}
span{font-size:12px;color:#444;text-shadow: 0 1px 0 rgba(255,255,255,0.6);padding:4px 8px;}
sup{background-color:rgba(0,0,0,0.3);color:#FFF;text-shadow:1px 1px 0 #000;font-size:11px;font-weight:normal;padding:6px 8px;position:static;height:auto;border-left:1px solid #B6B6B6;}
li.high sup{color:#FAA;
  background-color:rgba(60,60,0,0.4);
  text-shadow:0 0 4px #000;font-weight:bold;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes fade {
  35%  { opacity: 1.0;}
  50%  { opacity: 0.2;}
  65%  { opacity: 1.0;}
}

li.selected{background:#FFF;border-color:#CCC;margin-bottom:0px;padding-bottom:0px;}
li.selected sup,li:hover.selected sup{background-color:transparent;border-color:#fff;color:#000;text-shadow:none;}

li:hover{border-color:#777;}
li:hover sup{background-color:rgba(0,0,0,0.5);}