5202

12.7.11

Blogger-Seitenleiste komplett in CSS3 nachgebaut

<a class="nav" href="http://www.blogger.com/Link1" title="Seite 1">START</a> 
<a class="nav" href="http://www.blogger.com/Link2" title="Seite 2">ARCHIV</a> 
<a class="nav" href="http://www.blogger.com/Link3" title="Seite 3">START</a> 
<a class="nav" href="http://www.blogger.com/Link4" title="Seite 4">ARCHIV</a> 
<a class="nav" href="http://www.blogger.com/Link5" title="Seite 5">START</a>

.nav, a.nav:link, a.nav:visited {
   display:block; 
   width:auto; 
   height:auto;
   padding: .6em 1.5em;
   margin:0px; 
   text-align:center; 
   text-decoration:none; 
   font-family: Georgia,Utopia,'Palatino Linotype',Palatino,serif;
   font-size:14px; 
   font-weight: bold;
   color:#444444;
   float:left; 
   overflow:hidden;
}
a.nav, a.nav:link, a.nav:visited {
   border-right: 1px solid #9A9A9A; !important;
   border-top: 1px solid #9A9A9A; !important;
   border-bottom: 1px solid #9A9A9A; !important;
}
a.nav, a.nav:link, a.nav:visited {  
   background: -moz-linear-gradient(top, #EEEEEE, #C1C1C1);
   background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEEEEE), to(#C1C1C1));
}
a.nav:hover {
   background: -moz-linear-gradient(top, #676767, #919191);
   background: -webkit-gradient(linear, 0 0, 0 100%, from(#676767), to(#919191));
   color:#ffffff;
}
a.nav:first-of-type  {
   -webkit-border-top-left-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border-left: 1px solid #9A9A9A;
}
a.nav:last-of-type {
   -webkit-border-top-right-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}