Tabs estilo Windows clásico

De pronto puede ser de utilidad, he terminado el estilo de unos tabs tipo Windows, para muestra la siguiente imagen ...



Primero está la estructura html


<div class="wintab_back" >
<ul class=wintabstyle>
<li class="li_s">
<div class="wintab_s wintab_s_l"></div>
<div class="wintab_s">
<div>Clientes</div>
</div>
<div class="wintab_s wintab_s_r"></div>
</li>
<li class="li_n">
<div class="wintab wintab_l"></div>
<div class="wintab">
<div>Información del Producto</div>
</div>
<div class="wintab wintab_r"></div>
</li>
<li class="li_n">
<div class="wintab wintab_l"></div>
<div class="wintab">
<div>Ventas</div>
</div>
<div class="wintab wintab_r"></div>
</li>
<li class="li_n">
<div class="wintab wintab_l"></div>
<div class="wintab">
<div>Informes</div>
</div>
<div class="wintab wintab_r"></div>
</li>
</ul>
<div class="wintab_cont">Nombres completos
</div>
</div>


Segundo el estilo

.wintab_back
{
BACKGROUND-COLOR: #d4d0c8;
width:400px;
height:300px;
padding-top:10px;
}

.wintab_cont

{
BACKGROUND-COLOR: #d4d0c8;
background-repeat:repeat-y ;
padding-left:10px;
padding-right:21px;
height:250px;
width:305px;
margin:auto 5px auto 40px;
border-bottom-color:#d4d0c8;
border-bottom-style:outset;
border-bottom-width:2px;
border-color: #d4d0c8;
border-left-color:#d4d0c8;
border-left-style:outset;
border-left-width:2px;
border-right-color:#d4d0c8;
border-right-style:outset;
border-right-width:2px;
}

.wintabstyle

li
{
padding-bottom:3px;
display:block;
float:left;
hasLayout:-1;
BACKGROUND-COLOR: #d4d0c8;
background-repeat:repeat-x ;
margin:0px;
border-right-width:0px;
border-top-width:0px;
border-left-width:0px;
border-bottom-width:0px;
display:block;
list-style-type:none;
font-size:12px;
font-weight:700;
}

.li_s

{
background:url("images/style03_s_back.gif");
}

.li_n

{
background:url("images/style03_n_back.gif");
}

.wintab_s

{
background-image:url("images/style03_s_back.gif");
background-color:#e3e2dc;
padding-bottom:3px;
float:left;
height:18px;
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
MARGIN: 0px;
CURSOR: default;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #e3e2dc;
BORDER-RIGHT-WIDTH: 0px
}

.wintab_s_l

{
margin: 0;
padding-left: 10px;
background: url(images/style03_s_left.gif) repeat-x bottom;
background-repeat:no-repeat;
background-position-x:left;
background-position-y:bottom;
}

.wintab_s_r

{
margin: 0;
padding-right: 10px;
background: url(images/style03_s_right.gif) repeat-x bottom;
background-repeat:no-repeat;
background-position-x:right;
background-position-y:bottom;
}

.wintab

{
background-image:url("images/style03_n_back.gif");
background-color:#d4d0c8;
padding-bottom:3px;
float:left;
height:18px;
}

.wintab_l

{
margin: 0;
padding-left: 10px;
background: url(images/style03_n_left.gif) repeat-x bottom;
background-repeat:no-repeat;
background-position-x:left;
background-position-y:bottom;
}

.wintab_r

{
margin: 0;
padding-right: 10px;
background: url(images/style03_n_right.gif) repeat-x bottom;
background-repeat:no-repeat;
background-position-x:right;
background-position-y:bottom;
}

.wintab

div
{
padding-top:5px;
}

Y tercero las imagenes, que las podemos bajar del siguiente enlace

http://www.ziddu.com/download/2331279/WinTabImages.zip.html

No hay comentarios: