Diseño gráfico y editorial. Tutoriales de Indesign y Photoshop. Vectorizar logo e imágenes

Graficos de barras con CSS

Necesitais hacer graficos de barras para vuestro blog ? Pues con CSS lo tenemos fácil!
Os mostraré como genera diferentes tipos de graficos de barras.

1. Grafico de barras simple

imagen-21

Código CSS:
[css]
.grafico {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.grafico .barra {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.grafico .barra span {
position: absolute; left: 1em;
}[/css]

Y este es el código html.
Creamos un “div” con la clase “grafico” y dentro del “div grafico” la barra. Así de sencillo!
[html]
<div class="grafico"><strong class="barra" style="width: 24%;">24%</strong></div>
[/html]
Ver los resultados de los graficos.

2. Grafico de barras complejo

barra-css2

Código CSS:
[css]
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack,
apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}[/css]

Y este es el código html.
[html]
<dl> <dt>Love Life</dt> <dd>
<div style="width: 25%;"><strong>25%</strong></div>
</dd> <dt>Education</dt> <dd>
<div style="width: 55%;"><strong>55%</strong></div>
</dd> <dt>War Craft 3 Rank</dt> <dd>
<div style="width: 75%;"><strong>75%</strong></div>
</dd> </dl>
[/html]

3. Grafico de barras vertical

barra-css3

Código CSS:
[css]
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
[/css]

Y este es el código html.
[html]
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
[/html]


Comentarios
Harvey Specter
Posted at 1:15 pm 22 Junio, 2009
tiobuenow
Responder
Author

Gracias, por compartirlo.
Eh agregado un enlace de la noticia hacia tu blog.
Espero , que sigas asi.
Ya que me interesa también , los temas de css , etc..
Si quieres puedes visitarme , acabo de empezar, hace unos meses.
Si te interesa un tema , no duces en enlazarme.
puedes ver la noticia,

aqui

    Harvey Specter
    Posted at 2:32 pm 22 Junio, 2009
    Pkdisseny
    Responder
    Author

    Hola “Tiobuenow” espero que vaya todo bien en tu blog! y animo con los css… es todo un mundillo !

Harvey Specter
Posted at 10:05 am 23 Mayo, 2012
Ulberto
Responder
Author

Hola amigo, antes te agradesco las muy buenas intenciones, recien empiezo en esto, me llevas un poquillo de ventaja por no decir mucho, hombre yo tengo en esto exactamente 1 año; SOBRE GRAFICOS deseo intercalar información de valores estadisticos en que la resultante de la sumatoria de valores; por ejemplo costos sobre mantenimientos se acopien mediante una base de datos, al ser recibidos en automatico genere una grafica de valores acumulados; si me has entendido o no me lo dices para ser más especifico sobre este proyecto que estoy en vías de desarrollarlo poco a poco; y muchas gracias.

Harvey Specter
Posted at 5:54 am 11 Noviembre, 2013
Jhonatan Plata
Responder
Author

Muchas gracias, la verdad me sirvio mucho para graficar unas encuestas con asp. Excelente, Dios te bendiga.

Responder