376 字
2 分钟
Fluent风格的Argon主题你见过吗?
2023-07-22
无标签

这是我网站以前的样子:

这是我网站现在的样子:

最大的变化是卡片变得透明,且有毛玻璃效果——所有的卡片都是这样。

是的,这样的设计很像Windows11的Fluent,当然缺点还是有的,最大的缺点帧数不高,因为大面积的模糊效果很影响性能。而且因为未知原因,表情卡片有Bug,无法使用。

那么,这种效果如何实现呢?

第一步:基础效果#

打开WordPress后台>外观>自定义>额外CSS,添加以下代码:

.card{ background-color(255, 255, 255, 0.7) !important; backdrop-filter(16px) !important ; }

可以看到,所有卡片都透明了,其中可以更改的值有:

background-color(R, G, B, A) !important;

  • R:卡片的红色度

  • G:卡片的黄色度

  • B:卡片的蓝色度

  • A:卡片的透明度

backdrop-filter(X px) !important ;

  • X:卡片的模糊强度

第二步:质感边框#

添加边框可以增强卡片的质感,在下面添加以下代码:

.card{ border-style!important; border-width:1px !important; border-color(255, 255, 255, 0.9) !important; }

效果可能不明显,但是卡片周围有白色边框了,其中可以更改的值有:

border-style!important;

  • X:边框的样式,不懂的人不要改

border-widthpx !important;

  • X:边框的粗细

border-color(R, G, B, A) !important;

  • 同上,但更改的是边框的颜色

其它修改#

这个时候基本完成了,但是一些特殊的卡片(公告、页脚等)还是老样子,由于篇幅关系,只能留给大家探索了。

Fluent风格的Argon主题你见过吗?
https://pinpe.top/posts/old/fluent风格的argon主题你见过吗/
作者
Pinpe
发布于
2023-07-22
许可协议
CC BY-NC-SA 4.0