Pages Menu
Categories Menu

Posted on 23 Abr, in Code, CSS | 4 comments

Gráficos de línea solo con CSS

Gráficos de línea solo con CSS

Pure CSS Line Graph es una técnica creada por Alen Grakalic que permite generar gráficos de líneas utilizando css sprites y posicionamiento. El método reemplaza texto por imágenes con posicionamiento absoluto valiéndose del elemento DL (listas de definición), la dimensión del gráfico de fondo dara la pauta para definir la de los elementos hjos que en el ejemplo representan cada día que se reemplazarán al usar el elemento DD. El concepto es bastante avanzado pero luego de verlo con detenimiento se termina comprendiendo.

Gráficos de línea solo con CSS Gráficos de línea solo con CSS Gráficos de línea solo con CSS Gráficos de línea solo con CSS

Un gráfico sería generado con un código como este

Day 1
3
Day 2
36
Day 3
23
Day 4
56
Day 5
55
Day 6
32
Day 7
79
Day 8
74
Day 9
77
Day 10
83
Day 11
34
Day 12
39

[vía CSS Beauty]

  • Robert

    Como descargo un ejemplo ?

    • Hola Robert
      Solo debes seguir el enlace a la página del desarrollador para descargar la biblioteca y ejemplos
      saludos

      • Robert

        Gracias, por la ayuda. =)

      • Robert

        Realmente interesante !!!!!

  • Pingback: TengoBlog()