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]

4 Comments

  1. Como descargo un ejemplo ?

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

      • Gracias, por la ayuda. =)

      • Realmente interesante !!!!!

Trackbacks/Pingbacks

  1. TengoBlog - [curdaneta] Gráficos de línea solo con CSS: Pure CSS Line Graph es una técnica creada por Alen Grakal.. http://tinyurl.com/c2qp8q [Original…

Post a Reply

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Share This