Menu

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

<返回列表

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

这些图表中的大多数都带有额外的CSS动画和渐变效果。但是,您会发现一些数据的定位、大小、形状和设计都有不同的地方。完美的收藏任何前端开发人员寻找一个光滑的条形图用户界面。

1.数据图表

在这一组,你会发现一些图表是美丽的设计和非常好的执行。开发人员KrisOlszewski主要关注这些条形图的UX,以及每个条形图的顶部共享原始数据(在本例中为占位符编号)。

当然,整个事情运行在CSS 3上,这无疑是令人印象深刻的。它具有垂直和水平条形图的模板以及分层条形图,您可以在其中根据特定的值更改背景色。

我最喜欢的产品之一很容易就出现了,因为它为开发人员提供了很多不同的选择和定制。

2.口袋妖怪条图

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

这些口袋妖怪风格的酒吧为网络提供了一个创造性的图形设计。每个条依赖于一个特定的颜色方案和向量元素,为个人的眼睛口袋妖怪。

每一个都有一个悬停动画效果,所以你甚至可以重新样式,以适应任何你想要的过渡。如果你想把这些生物变成其他动物,你可以用改变的颜色遵循同样的模板。

3.动画图

条形图用于显示可视化数据,以便于使用。这意味着两个可视项目应包括原始数据。

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

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

4.极简图

简单易用最好地描述极简主义狂热打扫网络。对于响应性强的网站或不需要大量色彩方案的简单布局来说,极简主义往往是最好的选择。

使用这个条形图,你可以重新调整数据的样式,以适应任何你想要的浅色。

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

5.纯CSS色条

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

每个酒吧都使用经典的Web2.0梯度感觉有点老了,但看上去很棒。整个设计工作在Sass代码上,并使用变量设置动画延迟、条形图大小和总图形高度。

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

6.交错水平杆

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

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

我所见过的更干净的条形图之一,它可以很好地工作在任何基于技能的图表上。投资组合网站.

7.响应条形图

每个现代网站都应该有反应来容纳所有的设备。但有些因素比其他因素更难应对。

制表符、大表和图表都是复杂的例子。这个响应性图表处理较小屏幕的工作非常出色。它不会重新排列超过总大小和空间之间的酒吧。

在极小的屏幕上,条形物品可能会感到拥挤,几乎无法阅读。但在大多数情况下,这种反应的风格是奇妙的和完美的替代静态图形。

8.每日CSS图

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

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

它的设计简单和干净的动画效果附加在每个酒吧。更不用说它遵循的单色方案,可以很容易地适应任何网站。

9.库存图

另一个很酷的每日CSS例子是使用CSS和一些巧妙的HTML技巧创建的葡萄园库存图。

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

当然,这也不适用于大多数网站,但这证明了在现代CSS中所能做到的事情。

10.CSS-仅限于横向技能

你会在网上找到大量的技能测量条形图,但是JedTrow的这张是一个真正的享受。

它被设计成完全响应,它在任何屏幕上都是完美无瑕的工作。您可以将此条形图调整到320 px用于智能手机,而且它仍将保持其一致性。

此外,这支笔包括一个小的教程部分下面的演示,你可以看到所有的源代码和它的工作方式。当然,您也可以从CodePen的IDE复制/粘贴,但是很高兴看到开发人员分解了他们的过程。

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


最新网站设计资讯
企业网站建设

企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

联系我们

电话:18868949445QQ:294756585 邮箱:[email protected]

联系睿虎总监微信

微信