water.css项目简介

这篇文章发布于 2021年02月13日,星期六,01:23,归类于 CSS相关。 阅读 4182 次, 今日 8 次 3 条评论

 

water.css占位图

一、项目简介

今天偶然看到一个名为water.css的项目,乍一看可能以为是实现CSS水波效果的CSS库。

结果我一看这Star数据,我勒个擦,直奔 6K 去了。

星星数量

CSS水波效果库再怎么玩出花也不可能有6K Star,因为特效这玩意,在圈子里毕竟还属于小众领域。

然后我就花时间去了解了下,发现这个项目还是有点用处的,至少对于我个人而言是挺有用的。

项目地址:https://github.com/kognise/water.css

项目是干嘛的

通过引入一段CSS文件,可以让浏览器默认的HTML元素的UI变得那么好看一点点。

例如按钮尺寸会大那么一点点,单复选框尺寸也会大一点,表格会有简单的边框线和背景等。

相关效果可以访问官网页面进行体验:https://watercss.kognise.dev/

要是哪天官网凉了,可以访问这里,我花了几个小时翻译的中文版。

中文版翻译效果示意

二、我为什么需要

由于我乐于做技术传播,因此会大量制作演示用的demo页面,而在做一些demo页面的时候,就会用到按钮、链接元素。

以前,我都是现用现写,例如按钮,常常会使用下面的CSS代码(因为默认按钮尺寸太小了):

button {
    width: 120px; height: 40px;
    font-size: 100%;
}

因为每次写下也就一会会,没有在意,啰嗦就啰嗦点,毕竟不是时间瓶颈。

嘿,没想到有人整了个water.css,实现了我平时整demo经常做的事情,可以可以。

water.css引入后按钮张这样:

按钮

不过,我自己反思的是,我怎么就没想到整这么个玩意呢?

以前整过一个quick-layout.css的项目,也是为了demo和文档页面服务的:

API文档

自己也在多个demo页面中用过,后来自己用着用着就不用了,因为需要记住类名,这时间一长,我自己都不记得了,还要去找文档。

虽然实现的效果要比Water.css好多了,Water.css是美了一点点,quick-layout.css是美了一大截(对比按钮效果,如下图所示)。但是,Water.css不需要记住类名,直接对HTML标签做了微小的美化。

quicklayout.css中的按钮

对于工具而言,上手简单似乎更为重要。

现在回过头看,quick-layout.css这个项目还是可以的,想法不错,如果好好运营与安利,说不定6K Star也有的。

可惜,我主要精力在不断学习与push新东西上,没法持续打理。

三、最后的点评

Water.css用在实际项目中是不现实的,限制很多,API文档页面使用我也觉得悬,除非像W3C官网那样粗糙的API文档,因此基本上就只能用在对UI没什么考究的demo演示页面中。

考虑到平时需要用到demo演示页面的开发者的数量,我发现这5.9K的Star数目有些对不上啊!

难道Water.css还有其他牛逼的功能,莫非哪个大佬专门案例推广了一番。

属于一个有用,但不至于兴盛的项目。

别说,Water.css对我还是有所启发的。

我自己的御用demo页面模板看来可以做一些类似的处理。

好,就这么多。

翻译花了个把小时,大部分时间用在翻译和理解上了。

明天天气不错,钓鱼去咯!耶~

(本篇完)

分享到:


发表评论(目前3 条评论)

  1. 代码如诗如画说道:

    看了几分钟,没发现water.css有啥重要作用。。。

  2. 某某某说道:

    今天高产啊!