soy Kseso y esto EsCSS

Gráficos circulares, lineales y de barras en puro Css

Gráficos lineales, de barras o circulares en puro Css.

Gráficos circulares, lineales y de barras en puro Css

·Por Kseso ✎ 5
Gráficos en Puro Css: Circulares, lineales y de barras

Gráficos en Puro Css: Circulares, lineales y de barrasHace unas fechas me encontré en codepen una recreación de toda esta UI realizada en Html5 y Css a partir de una imagen. Buen curro por parte de su autor, @Jlalovi.

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

Ver demo a full

See the Pen Charts pure Css by Kseso (@Kseso) on CodePen

Cualquier duda que tengas sobre el Css empleado para realizar estos gráficos en Puro Css ya sabes: los comentarios están para ello.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso