Medidor de porcentajes con CSS

13/ago/2007 7
SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

Para muchos, se justifica definitivamente el uso de hojas de estilo para construir sitios web al momento en que se potencia la gráfica con el código generado por el desarrollador. Este es el caso que muestro a continuación, donde con un truco entre imágenes y código CSS, podemos fácilmente generar mostradores gráficos de porcentajes, los que dependiendo de la creatividad se verán muy atractivos. De ninguna manera lograremos medidores dinámicos, donde la barra se mueva indicando alguna actividad. Con esta técnica podremos a través de porcentajes reales y absolutos entregadas mediante CSS crear diferentes classes, cada una con una instancia de porcentaje que queramos mostrar. Para un mejor entendimiento, el ejemplo de lo que se mostrará:

Ver ejemplo

Primero que nada, las imágenes involucradas. La primera de ellas es la barra de porcentaje, la que tiene 2 partes: lleno y vacío. La segunda es el envoltorio, la que envuelve y deja ver sólo lo que queremos mostrar como cantidad de porcentaje y que será un GIF transparente (el medio de esta imagen es transparente para dejar ver por debajo la barra). Es importante que la barra de porcentaje sea el doble de ancho que su envoltorio, así se mostrará lleno en su 100% y la mitad de esta imagen (el límite entre vacío y lleno) es lo que se moverá dependiendo del porcentaje que entreguemos.

Diagrama composición gráfico con CSS

Para esto se necesita el CSS para la imagen, la que contendrá el envoltorio. Esta imagen estará integrada como HTML, con la etiqueta <img />:

<img src="imgs/contenedor_barra.gif" width="200" height="20" />

Ahora, para agregar la barra y que ésta pase por detrás del envoltorio (en el fonddo será un background de ésta), utilizamos CSS para crear un estilo sólo para la etiqueta <img>:

img {
     background-image: url(imgs/barra.gif);
     background-position: 100% 0;
     background-repeat: no-repeat;
     margin-right: 10px;
}

Con este estilo, le diremos a la imagen que tenga como fondo la barra y que esté vacía. Ahora con diferentes classes (tantas como sean necesarias) mostraremos los niveles de porcentajes. Pero hay un pero. Como en CSS, el background-position se define primero desde lo horizontal (left, right) y luego vertical (top, bottom), y esta propiedad me permite posicionar a través de porcentajes, lo haremos pero a la inversa: si queremos mostrar 10% de nuestra barra, le diremos 90% al position. Es al contrario la cosa, sino el 10% se nos mostrará a la izquierda, y no a la derecha que es la convención occidental a la que estamos acostumbrados. Siguen las classes para varios porcentajes:

img.sesenta {
     background-position: 40% 0;
}
img.diez {
     background-position: 90% 0;
}
img.cien {
     background-position: 0% 0;
}

Ver nuevamente ejemplo.

Comentarios

  1. Barras de porcentaje en css « Xyberneticos [#]

    […] En CSSLab podremos encontrar un sencillo tip, para lograr a partir de imágenes y un poquito de código Css nuestras barras de porcentajes. Truco que vendrá bien para lograr hacer cosas muy bonitas. […]

  2. Daniel [#]

    OH otro uso interesante al CSS…buen trabajo CSSLAB ..

  3. Barras de porcentaje en css « Indigo`s Blog [#]

    […] En CSSLab podremos encontrar un sencillo tip, para lograr a partir de imágenes y un poquito de código Css nuestras barras de porcentajes. Truco que vendrá bien para lograr hacer cosas muy bonitas. […]

  4. Nathan_1979 [#]

    HOla Jorge!
    Muy buena Página ,
    Una pregunta que me ronda por la cabezota …

    ¿Por que no usas mejor la etiqueta ? para
    hacer el class=”codecss” en vez de usar

    Así estaŕa tabulado sin usar espacios, bueno la verdad es que con pre los datos tienden a salirse del recuadro … cierto?

    Un saludo.

  5. CSS - Barras de porcentaje at Blog Borchani Studios [#]

    […] CSSLab podremos encontrar un sencillo tip, para lograr a partir de imágenes y un poquito de código Css […]

  6. Germán [#]

    Extremadamente simple e increíblemente funcional.

    Yo simplemente añadiría directamente en la imagen el CSS. No es lo más ‘correcto’ pero si generas las páginas dinámicamente, puedes ir desde 0 a 100%. Y no estás limitado a unos valores concretos.

    Gracias!.
    Y genial trabajo.

  7. Farah [#]

    hola!!
    llevo dias buscando esto pero no se como hacerlo, me podrias ayudar?
    gracias!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab