Fluent风格的Argon主题你见过吗?

这是我网站以前的样子:

这是我网站现在的样子:

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

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

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

第一步:基础效果

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

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

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

  • background-color:rgba(R, G, B, A) !important;
    • R:卡片的红色度
    • G:卡片的黄色度
    • B:卡片的蓝色度
    • A:卡片的透明度
  • backdrop-filter:blur(X px) !important ;
    • X:卡片的模糊强度

第二步:质感边框

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

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

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

  • border-style:X !important;
    • X:边框的样式,不懂的人不要改
  • border-width:X px !important;
    • X:边框的粗细
  • border-color:rgba(R, G, B, A) !important;
    • 同上,但更改的是边框的颜色

其它修改

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

在没有特别声明的情况下,内容均为原创,请遵守CC BY-NC-SA 4.0版权协议!

评论

  1. awake
    5 月前
    2024-2-03 23:41:00

    我去 好漂亮 想学

  2. 11 月前
    2023-8-03 8:05:35

    666

  3. 11 月前
    2023-7-22 22:58:16

    好卡,在你的网页我的笔记本卡得不行了

    • 博主
      小彦
      11 月前
      2023-7-22 23:41:22

      所以说性能低

发送评论 编辑评论

注意事项:
  1. 请遵守法律,友善发言。
  2. 评论被回复后没有提醒,请自行关注,敬请见谅。
  3. 无关的内容请移步留言板。
  4. 支持Markdown,可以使用第三方图床插入图片。

				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
呼呼
上一篇
下一篇