barra-css3

En esta entrada os mostraremos como crear distintos tipos de barras gráficas mediante el uso de CSS. Estas gráficas pueden ser muy útiles para mostrar la evolución de algo, además, no se requiere ninguna imagen, lo que a Google le gusta y acelera la carga del sitio web. Ya os enseñamos a crear una barra animada tiempo atrás.

Empezemos:

1. Simple barra gráfica

barra-css1

Una barra gráfica horizontal con porcentaje, para aplicarlo, deberemos incluir este código 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; }

Y este código HTML:

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

El porcentaje se puede cambiar modificando el width de y el número en porcentaje que rodea dicha etiqueta (Ahora mismo es 24%).

Podemos ver un ejemplo de este tipo de gráfica aquí:

Ejemplo de barra gráfica simple

2. Barra CSS compleja

barra-css2

Esta barra, como se puede observar en la imagen, goza de una compleja visualización, por lo que es más complicada construirla. Para crearla.

El código CSS a implementar sería:

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;
     }

El código 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>

Se puede ver un ejemplo de su funcionamiento.

3. Barra vertical

barra-css3

Otro tipo de barras gráficas son las barras verticales. Para crearlas, deberemos añadir este código CSS a nuestro documento:

   #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; }

El código HTML sería:

<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>

Ya estaría lista la barra.

Se puede ver un ejemplo de su funcionamiento.

Vía | Apples to Oranges