Tabs tipo Facebook

No puedo negar que me ha gustado la nueva vista de Facebook por eso estoy tratando de replicar algunas cosas que tiene la página, ahora vamos a ver como replicar la vista que tienen los tabs cuando estan seleccionados.

Lo que vamos a tratar de conseguir es el diseño que obtienen los tabs cuando son selecionados com podemos ver en la imagen siguiente:



Para conseguir el efecto necesitamos las siguientes imagenes

Imagen 1:

composer_tab_selected


Imagen 2:

composer_tab_selected_arrow


Imagen 3:(puede ser cualquier imagen ya que es el icono que acompaña el texto del tab)

Ahora la estructura del item del tab


<ul>
<li class="selected">
<div class="composer_tab_rounded">
<div class="composer_tab_rounded composer_tab_rounded_tr">
<div class="composer_tab_rounded composer_tab_rounded_bl">
<div class="composer_tab_rounded composer_tab_rounded_br">
<div class="composer_tab_arrow">
<a class="tab_link" >Actualizar Estado</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>


Y el estilo para conseguir el efecto

.clearfix
{
padding-bottom:3px;
}

.selected
{
display:block;
float:left;
margin:auto 1px auto auto;
margin-right:1px;
hasLayout:-1;
}

.composer_tab_rounded
{
background-image:url("../images/imagen_1.gif");
background-repeat:no-repeat;
display:block;
list-style-type:none;
font-size:11px;
font-weight:700;
height:30px;
}


.composer_tab_rounded_tr
{
background-position-x:right;
background-position-y:top;
}


.composer_tab_rounded_bl
{
background-position-x:left;
background-position-y:bottom;
}


.composer_tab_rounded_br
{
background-position-x:right;
background-position-y:bottom;
}


.composer_tab_arrow
{
background-image:url("../images/imagen_2.gif");
background-position-x:center;
background-position-y:bottom;
background-repeat:no-repeat;
display:block;
list-style-type:none;
height:30px;
}


.tab_link
{
background-image:url("../images/imagen_3.gif");
background-position-x:5px;
background-position-y:4px;
background-repeat:no-repeat;
display:block;
padding:6px 6px 10px 26px;
padding-bottom:10px;
padding-left:26px;
padding-right:6px;
padding-top:6px;

}

1 comentario:

Wjama dijo...

Si la hoja estilo está en la misma carpeta de la página, para cargar las imagenes la llamada debe ser
background-image:url("images/composer_tab_selected.png");

Cuando la hoja de estilo está en una carpeta diferente a la página, para cargar las imagenes la llamada debe ser
background-image:url("../images/composer_tab_selected_arrow.gif");

En ambos casos las imagenes están dentro de la carpeta images