10 个用于创建简单条形图的 CSS 片段

已发表: 2021-04-21

正在寻找一种在 Web 上创建简单 CSS 条形图的方法？这个集合肯定会有所帮助，因为它充满了免费的开源条形图，所有这些条形图都是用 CSS 设计的。

这些图表中的大多数都带有额外的 CSS 动画和渐变效果。但是你会发现一些甚至重新设计了数据的定位、大小、形状和设计。任何寻求时尚条形图 UI 的前端开发人员的完美集合。

1. 数据图表

在这组中，您会发现一些设计精美且执行得非常好的图表。开发人员 Kris Olszewski 主要关注这些条形图的用户体验以及每个条形图的顶部共享原始数据（在本例中为占位符数字）。

自然，整个事情都在 CSS 上运行，这当然令人印象深刻。它具有垂直和水平条以及分层条的模板，您可以在其中根据某些值更改背景颜色。

很容易成为我最喜欢的套装之一，因为它为开发人员提供了多种选择和定制。

不能说这种设计在现实世界的布局中特别有用，但它确实令人印象深刻。

这些口袋妖怪风格的条形图为网络提供了创造性的图形设计。每个条形图都依赖于特定的配色方案以及单个口袋妖怪眼睛的矢量元素。

每个都具有悬停动画效果，因此您甚至可以重新设计它以适应您想要的任何过渡。如果你想把这些生物变成其他动物，你可以按照同样的模板改变颜色。

条形图用于显示可视化数据，方便使用。这意味着应该包括视觉项目和原始数据。

这是我非常喜欢这张图表的一件事，它在每个条形的顶部使用百分比标签。它没有图例或任何 X/Y 标签，但添加这些标签并不难。

我认为最令人印象深刻的部分是整个事情是如何通过 CSS 运行的。由于 CSS 属性，动画和百分比文本都会出现。疯狂的事情！

简单易用最好地描述了席卷网络的极简主义热潮。极简主义通常是响应式网站或不需要重配色方案的简单布局的最佳选择。

使用此条形图，您可以重新设置数据的样式以适合您想要的任何浅色。

它使用任意背景行来指示测量值，您甚至可以在 Y 轴上添加标签以澄清数据。

CSS 渐变为 web 添加了很多内容，这个条形图只是渐变的另一个例子。

每个条都使用经典的 web 2.0 渐变，感觉有点老派，但看起来很棒。整个设计基于 Sass 代码，并使用变量来设置动画延迟、条形大小和总图形高度。

要编辑颜色，您需要使用 Sass/SCSS 或使用 CodePen 编译成原始 CSS。但这不是一个过于复杂的图表，所以这应该不会太麻烦。

线性动画是我的最爱，因为它们能快速吸引注意力。在这支笔中，您将看到一个线性动画示例，每个条形都一个接一个地加载到视图中。

它是水平设计的，因此条形图会在屏幕上加载，并在条形图内包含标签。这样，总“技能水平”测量遵循 X 轴，并为垂直添加更多技能留出了空间。

我见过的更清晰的条形图之一，它可以在任何基于技能的投资组合网站上出色地工作。

每个现代网站确实应该响应以适应所有设备。但有些元素比其他元素更难应对。

选项卡、大表和图表都是复杂的示例。这个响应式图表在处理较小的屏幕时表现出色。它不会重新排列超出条形之间的总大小和空间。

在较小的屏幕上，条形项目会让人感到局促，几乎无法阅读。但在大多数情况下，这种响应式风格非常棒，是静态图的完美替代品。

开发人员喜欢通过 Daily CSS 等挑战来测试他们的技能。这每天都会提取 UI 设计的图像，并要求开发人员用 HTML/CSS 重新创建它们。

你会在 CodePen 上找到很多这样的东西，这张图就是一个原始的例子。

它的设计带有简单和干净的动画效果附加到每个栏。更不用说它遵循可以轻松适应任何网站的单色配色方案。

另一个很酷的 Daily CSS 示例是使用 CSS 和一些巧妙的 HTML 技能创建的葡萄园库存图表。

这是一个非常独特的想法，更令人印象深刻的是它完全通过 CSS 运行。图形的实际设计以及它如何在浏览器中完美呈现给我留下了最深刻的印象。

当然，这在大多数网站上也不起作用，但它证明了现代 CSS 中的可能性。

你会在网上找到很多衡量技能的条形图，但 Jed Trow 的这个是一种真正的享受。

它旨在充分响应，并且在任何屏幕上都能完美运行。对于智能手机，您可以将此条形图的大小调整为 320 像素，并且仍将保持其一致性。

另外，这支笔在演示下方包含一个小型教程部分，您可以在其中查看所有源代码及其工作原理。当然，您也可以从 CodePen 的 IDE 中复制/粘贴，但很高兴看到开发人员分解他们的过程。

所有这些图表都提供了一些独特的东西，但它们也有一个共同点：对纯 CSS 代码的惊人使用。

您可能还喜欢： 10 个值得考虑的开源 JavaScript 数据图表库。