CSS Tabs

HTML

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div id=slideshow>
  <div class=slide>
      <input type=radio id=tab-1 name=tab-group-1 checked>
      <label for=tab-1>one</label>
      <div class=content>1</div>
  </div>
  <div class=slide>
      <input type=radio id=tab-2 name=tab-group-1>
      <label for=tab-2>two</label>
      <div class=content>2</div> 
  </div>
  <div class=slide>
      <input type=radio id=tab-3 name=tab-group-1>
      <label for=tab-3>three</label>
      <div class=content>3</div> 
  </div>
</div>
<!--[if lt IE 9]><script src=//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js></script><![endif]-->
<!--http://css-tricks.com/13758-functional-css-tabs-revisited/-->
</body>
</html>

CSS

body{background:#ddd;}
#slideshow{
    position:relative;
    zoom:1; 
    width:215px;
    text-align:center;
}
div.slide{
    display:inline-block;
    *display:inline;
    zoom:1;
}
div.slide label{
    display:block;
    width:9px;
    height:9px;
    position:relative;
    top:100px;
    left:1px;
    border-radius:5px;
    border:1px solid #333;
    background-color:#eee;
    background-clip:padding-box;
    cursor:pointer;
     -webkit-transition:8ms ease-in;
        -moz-transition:8ms ease-in;
             transition:8ms ease-in;
}
div.slide input{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    border:0;
    clip:rect(0 0 0 0);
}
div.content{
    zoom:1;
    position:absolute;
    z-index:1;
    opacity:0;
    top:10px;
    left:10px;
    width:200px;
    color:#333;
    font:bold 80px 'Helvetica Neue';
    text-shadow:0 1px #fff;
     -webkit-transition:.4s ease-in;
        -moz-transition:.4s ease-in;
             transition:.4s ease-in;
}
input[type=radio]:checked ~ label{
    width:13px;
    height:13px;
    margin:-2px;
    border-radius:8px;
    background-color:#ffea00;
    border-color:#d16903;
}
input[type=radio]:checked ~ div.content{
    opacity:1;
    left:10px;
}