网格背景如何从导航页迁移到博客主题

旧导航主题的网格背景是半神最重要的视觉资产,迁移时需要降低干扰并强化阅读体验。

设计 #CSS#网格背景#设计系统

导航页和博客页对背景的要求不同。导航页强调工具入口,卡片密度高,背景可以更强;博客页强调连续阅读,背景必须退到内容之后。

半神的处理方式是:

  1. 保留固定的网格线,让主题一眼能被认出来。
  2. 使用淡色径向光晕制造层次,但不使用大面积单色渐变。
  3. 让文章正文和卡片使用半透明表面,保证网格隐约可见。
  4. 在深色模式下提升边框和文本对比度,减少玻璃面板发灰。

这套方案的好处是静态、轻量、可配置。它不依赖图片资源,也不会影响首屏加载。

.site-shell::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
}

主题用户可以继续替换色彩变量,但不用改结构。

Comments

评论区

Artalk

输入关键词开始搜索。

0