Gráficos de barras mediante CSS
Si queréis mostrar información en forma de gráfico esto os vendrá como anillo al dedo. Son tres gráficas diferentes hechas mediante css y xhtml que salen de applestooranges.com. Para implementarlas primero descargar este pack de imagines que son las necesarias.
El primero de los gráficos se mostrará con este aspecto:
Para usarla, creamos una carpeta dentro de la cual metemos todas las imágenes del pack que comentaba antes. Creamos un archivo .html y lo guardamos en la misma carpeta donde metimos las imágenes. Para obtener la gráfica usaremos estos códigos en el .html:
CSS
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
HTML
El segundo se verá algo similar a esto:
Para implementarlo seguimos los mismos pasos que antes, solamente cambia el código css y html que añadimos a nuestro .html:
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;
}
</style>
HTML
El último de los gráficos tendrá este aspecto:
Si lo queremos usar, hacemos lo mismo que en los dos casos anteriores cambiando el css y html:
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; }
</style>
HTML
Enlace: CSS FOR BAR GRAPHS
Posts relacionados
- FotografÃa Matemática
- Ración de recursos 2.0
- 25 malos hábitos de los diseñadores gráficos + 20 malos hábitos de los clientes
7 Comentarios
Leave a comment
Hola, el “pack de imagines” en que parte exactamente del sitio se descarga??
thank you…
thank you…
??????? ?????
Thank you for sharing…
thank you for sharing
thank you for sharing