CSS para crear gráficos y barras

Escrito por J.F. el Domingo, 9 de Septiembre del 2007 a las 18:23

Visitando la portada de del.icio.us me he encontrado con una entrada en la cual nos enseñan códigos CSS para crear barras y gráficos. Muy interesante, por poner un ejemplo, aquí uno que no requiere mucho código:

TEXTO PLANO

CSS:

1. <style>
2.     .graph {
3.         position: relative; /* IE is dumb */
4.         width: 200px;
5.         border: 1px solid #B1D632;
6.         padding: 2px;
7.     }
8.     .graph .bar {
9.         display: block;
10.         position: relative;
11.         background: #B1D632;
12.         text-align: center;
13.         color: #333;
14.         height: 2em;
15.         line-height: 2em;           
16.     }
17.     .graph .bar span { position: absolute; left: 1em; }
18. </style>

El código HTML es tan simple como:

TEXTO PLANO

HTML:

1. <div class="graph">
2.     <strong class="bar" style="width: 24%;">24%</strong>
3. </div>

Enlace: | Más CSS para crear Gráficos y barras

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>