Cajas con estilo Facebook

Cajas con estilo Facebook


En la nueva interface de Facebook hay unas cajas que aparecen en el lado izquierdo con los datos personales, amigos, etc. Acá les dejo el estilo que aplican y un poco la estructura de las cajas.



Estructura html

<div class="box">

<h3 class="box_header">

<span>Datos Cliente</span>

</h3>

<div class="box_inside">

<dl class=info>

<div>

<dt>Código:</dt>

<span>999</span>

</div>

<div>

<dt>Nombre:</dt>

<span>xxxxxxxxxxxxxxxxxxxx</span>

</div>

<div>

<dt>Apellido:</dt>

<span>xxxxxxxxxxxxxxxxxxxx</span>

</div>

<div>

<dt>Dirección:</dt>

<span>xxxxxxxxxxxxxxxxxxxx</span>

</div>

<div>

<dt>Ciudad:</dt>

<span>xxxxxxxxxxxxxxxxxx</span>

</div>

</dl>

</div>

</div>

Estilo

.box_header
{
background-color:#eceff5;
border-bottom-color:#333;
border-color:#94a3c4 #333 #333;
border-left-color:#333;
border-right-color:#333;
border-style:solid none none;
border-top-color:#94a3c4;
border-top-style:solid;
border-top-width:0px;
border-width:0px medium medium;
color:#333;
display:block ;
font-family: Tahoma, Verdana, Arial;
font-size:11px;
font-weight:700;
margin:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
padding:5px 8px;
padding-bottom:5px;
padding-left:8px;
padding-right:8px;
padding-top:5px;
position:relative;
}

.box
{
border-bottom-color:#94a3c4;
border-bottom-style:solid;
border-bottom-width:1px;
border-color:#94a3c4 #d8dfea #94a3c4 #000000 ;
border-right-color:#d8dfea;
border-right-style:solid;
border-right-width:1px;
border-style:solid solid solid none;
border-top-color:#94a3c4;
border-top-style:solid;
border-top-width:1px;
border-width:1px 1px 0px medium;
display:block;
font-family: Verdana, Tahoma, Arial;
font-size:11px;
padding:0px 0px 10px;
padding-bottom:10px;
position:relative;
}

.box_inside
{
display:block;
font-family:Verdana, Tahoma, Arial;
font-size:11px;
hasLayout:-1;
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
padding:10px 7px 10px 8px;
position:relative;
}

.box_inside DT
{
color:#808080;
padding:1px 0px 2px;
clear:left;
}

.box_inside span
{
color:Black;
hasLayout:-1;
margin:0px 2px 0px 2px;
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
padding: 0px 0px 6px;
padding-bottom:6px;
}

No hay comentarios: