Gráficos circulares, lineales y de barras en puro Css
En ella había un par de detalles que su autor había dejado sin recrear: dos gráficos. Uno lineal y otro circular. Una pena que quedase inconcluso un trabajo tan minucioso y detallista sólo por ello.
Los veteranos del blog seguro que recuerdan que hace ya un tiempo dediqué un artículo al tema de los gráficos circulares realizados en puro Css.
Pero quedaba uno: el linear. Su realización en principio me pareció posible utilizando una técnica mencionada hace poco en el blog: anidar elementos para controlar transformaciones encadenadas y dependientes de la anterior: Secuencias progresivas en Transformaciones
Y una vez logrado lo anterior, quedaba pendiente un tipo de gráfico por aquello de no haber 2 sin 3. El de barras.
Este último realmente no tiene mayor dificultad. Son simples elementos rectangulares. Pero metidos en harina, digo en gráficos, ahí queda como complemento.
Antes de pasar a ver la demo permíteme un pequeño “disclaimer” tanto sobre el marcado html como los estilos generales: son los originales del pen que te mencionaba al inicio y procuré no alterarlos más que en lo imprescindible para permitir una compatibilidad. Tampoco entré a verlos en profundidad, de ahí que en el Css realizado por mi haya más de un “número mágico”.