10 fragmentos de CSS para crear gráficos de barras simples

¿Está buscando una manera de crear gráficos de barras CSS simples en la web? Esta colección seguramente ayudará, ya que está llena de gráficos de barras gratuitos y de código abierto, todos diseñados en CSS.

La mayoría de estos gráficos tienen un fuerte impacto con animaciones CSS adicionales y efectos de degradado. Pero encontrará algunos que incluso rediseñan el posicionamiento, el tamaño, la forma y el diseño de los datos. La colección perfecta para cualquier desarrollador front-end que busque una interfaz de usuario elegante con gráfico de barras.

1. Gráficos de datos

En este conjunto encontrará algunos gráficos que están bellamente diseñados y muy bien ejecutados. El desarrollador Kris Olszewski se centró principalmente en la UX para estos gráficos de barras junto con la parte superior de cada barra que comparte datos sin procesar (números de marcador de posición en este caso).

Naturalmente, todo se ejecuta en CSS, lo que sin duda es impresionante. Cuenta con plantillas para barras verticales y horizontales y barras escalonadas donde puede cambiar el color de fondo en función de ciertos valores.

Fácilmente uno de mis conjuntos favoritos porque ofrece mucha variedad para que los desarrolladores puedan elegir y personalizar.

2. Gráfico de barras de Pokémon

No puedo decir que este diseño sería particularmente útil en un diseño del mundo real, pero seguro que es impresionante.

Estas barras estilo Pokémon ofrecen un diseño gráfico creativo para la web. Cada barra se basa en un determinado esquema de color junto con elementos vectoriales para los ojos de Pokémon individuales.

Cada uno presenta un efecto de animación flotante, por lo que incluso puede cambiar su estilo para que se ajuste a las transiciones que desee. Y si quieres convertir estas criaturas en otros animales, puedes seguir esta misma plantilla con colores alterados.

3. Gráfico animado

Los gráficos de barras se utilizan para mostrar datos visuales para facilitar el consumo. Esto significa que deben incluirse elementos visuales y datos sin procesar.

Eso es algo que realmente me gusta de este gráfico que usa etiquetas de porcentaje en la parte superior de cada barra. No presenta una leyenda ni etiquetas X/Y, pero no sería difícil agregarlas.

Creo que la parte más impresionante es cómo todo se ejecuta a través de CSS. Las animaciones y el texto de porcentaje aparecen debido a las propiedades de CSS. ¡Cosas locas!

4. Gráfico minimalista

Simple y fácil de usar describe mejor la moda minimalista que arrasa la web. El minimalismo suele ser la mejor opción para sitios web receptivos o diseños más simples que no requieren esquemas de colores intensos.

Y con este gráfico de barras, puede cambiar el estilo de los datos para que se ajusten al color de luz que desee.

Utiliza filas de fondo arbitrarias para indicar medidas, e incluso puede agregar etiquetas en el eje Y para aclarar los datos.

5. Barras de color CSS puras

Los degradados CSS agregan mucho a la web y este gráfico de barras es solo un ejemplo más de degradados en acción.

Cada barra usa gradientes clásicos de la web 2.0 que pueden parecer un poco anticuados pero se ven fantásticos. Todo el diseño funciona con código Sass y utiliza variables para establecer el retraso de la animación, el tamaño de las barras y la altura total del gráfico.

Para editar los colores, deberá trabajar con Sass/SCSS o usar CodePen para compilar en CSS sin procesar. Pero no es un gráfico demasiado complejo, por lo que no debería ser un gran problema.

6. Barras horizontales escalonadas

Las animaciones lineales son algunas de mis favoritas porque captan la atención rápidamente. En este bolígrafo, verá un ejemplo de animación lineal con cada barra cargando a la vista una tras otra.

Está diseñado horizontalmente, por lo que las barras se cargan en la pantalla e incluyen etiquetas dentro del gráfico de barras. De esta manera, la medición del "nivel de habilidad" total sigue el eje X y deja espacio para agregar más habilidades verticalmente.

Uno de los gráficos de barras más limpios que he visto y puede funcionar espléndidamente en cualquier sitio web de cartera basado en habilidades.

7. Gráfico de barras receptivo

Cada sitio web moderno realmente debería ser receptivo para adaptarse a todos los dispositivos. Pero algunos elementos son más difíciles de responder que otros.

Las pestañas, las tablas grandes y los gráficos son ejemplos complejos. Este gráfico receptivo hace un excelente trabajo al manejar pantallas más pequeñas. No se reorganiza mucho más allá del tamaño total y el espacio entre las barras.

En pantallas más pequeñas, los elementos de la barra pueden sentirse apretados y casi imposibles de leer. Pero en su mayor parte, este estilo receptivo es fantástico y el sustituto perfecto para los gráficos estáticos.

8. Gráfico CSS diario

A los desarrolladores les gusta poner a prueba sus habilidades con desafíos como Daily CSS. Esto extrae imágenes de diseños de interfaz de usuario todos los días y pide a los desarrolladores que las recreen en HTML/CSS.

Encontrará muchos de estos en CodePen, y este gráfico es un ejemplo prístino.

Está diseñado con simplicidad y efectos de animación limpios adjuntos a cada barra. Sin mencionar que sigue un esquema de color monocromático que se puede adaptar fácilmente a cualquier sitio web.

9. Gráfico de inventario

Otro ejemplo genial de Daily CSS es este gráfico de inventario de viñedos creado con CSS y algunas habilidades de HTML astuto.

Es una idea bastante única y aún más impresionante que se ejecuta únicamente a través de CSS. Lo que más me impresiona es el diseño real del gráfico y cómo se representa perfectamente en el navegador.

Por supuesto, esto tampoco funcionaría en la mayoría de los sitios web, pero es un testimonio de lo que es posible en CSS moderno.

10. Habilidades horizontales de solo CSS

Encontrará muchos gráficos de barras para medir habilidades en línea, pero este de Jed Trow es un verdadero placer.

Está diseñado para ser totalmente receptivo y funciona perfectamente en cualquier pantalla. Puede cambiar el tamaño de este gráfico de barras a 320 px para teléfonos inteligentes, y aún mantendrá su consistencia.

Además, este bolígrafo incluye una pequeña sección de tutoriales debajo de la demostración donde puedes ver todo el código fuente y cómo funciona. Por supuesto, también puede simplemente copiar/pegar desde el IDE de CodePen, pero es bueno ver a un desarrollador desglosar su proceso.

Todos estos gráficos ofrecen algo único, pero también comparten una cosa en común: un sorprendente uso del código CSS puro.

También te puede interesar: 10 bibliotecas de gráficos de datos JavaScript de código abierto que vale la pena considerar.