viernes, 11 de marzo de 2011

barras de estado en CSS3

El resultado final sería este:

Aunque como siempre, no en todos los navegadores se visualiza el mismo resultado.

Comenzamos a crear la base una <div> en la pagina web con la siguiente información
<div class="meter">
       <span style="width: 25%"></span>
</div>
Continuamos creando el nuevo estilo "meter" en nuestra hoja CSS 
.meter {
       height: 20px; /* Can be anything */
       position: relative;
       background: #555;
       -moz-border-radius: 25px;
       -webkit-border-radius: 25px;
       border-radius: 25px;
       padding: 10px;
       -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
       -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
       box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
Ahora montamos las características de borde redondeado y aspecto a la barra.
.meter > span {
       display: block;
       height: 100%;
       -webkit-border-top-right-radius: 8px;
       -webkit-border-bottom-right-radius: 8px;
       -moz-border-radius-topright: 8px;
       -moz-border-radius-bottomright: 8px;
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
       -webkit-border-top-left-radius: 20px;
       -webkit-border-bottom-left-radius: 20px;
       -moz-border-radius-topleft: 20px;
       -moz-border-radius-bottomleft: 20px;
       border-top-left-radius: 20px;
       border-bottom-left-radius: 20px;
       background-color: rgb(43,194,83);
       background-image: -webkit-gradient(
       linear,
       left bottom,
       left top,
       color-stop(0, rgb(43,194,83)),
       color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
       center bottom,
       rgb(43,194,83) 37%,
       rgb(84,240,84) 69%
);
-webkit-box-shadow:
       inset 0 2px 9px rgba(255,255,255,0.3),
       inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
       inset 0 2px 9px rgba(255,255,255,0.3),
       inset 0 -2px 6px rgba(0,0,0,0.4);
       position: relative;
       overflow: hidden;
}
con esto tendríamos la lista nuestra barra de estado. Si queréis investigar mas tenéis mas información en la fuente