使用 TailwindCSS 的 background-filter 和 background-blur 构建一个玻璃质感的导航栏

玻璃变形是一种在 2020 年末开始流行的设计趋势，它是一种将背景模糊应用于元素的方法，使元素具有半透明感，并与周围元素形成鲜明的透视效果。

虽然这种设计趋势是最近才开始流行，但我们以前也见过，甚至在一些广泛使用的系统中也见过（说的就是你，Windows Vista）。看来真是“旧瓶装新酒”啊。

我喜欢尝试新鲜事物，周末我尝试了TailwindCSS v2.1中的新背景实用类，为我的网站导航栏添加了磨砂玻璃效果！效果非常好，所以我想教大家如何自己制作！快来看看吧！

TailwindCSS v2.1 和新的背景实用类

Tailwind 过去不支持 CSS 过滤器，但随着 v2.1 的发布，现在我们可以使用许多方便的实用类，包括新的 backdrop-filter 类！

为了在导航栏上实现玻璃化效果，我们只需要使用 ` backdrop-filterand` 和backdrop-blur`utility` 类，并稍微调整一下不透明度即可。非常简单！

在继续操作之前，请确保您已安装 Tailwind v2.1！

导航栏的基本结构

我们先从使用“nav”语义元素开始，并向其中填充一些项目。

<nav>
    <div>
      <div>
        <span>My Logo</span>
        <div>
          <a href="#">
            Dashboard
          </a>
          <a href="#">
            About
          </a>
          <a href="#">
            Projects
          </a>
          <a href="#">
            Contact
          </a>
        </div>
      </div>
    </div>
  </nav>

在应用玻璃变形效果之前，让我们先设置导航栏的样式，使其看起来像一个真正的导航栏。

<nav className="sticky top-0 z-10 bg-white">
    <div className="max-w-5xl mx-auto px-4">
      <div className="flex items-center justify-between h-16">
        <span className="text-2xl text-gray-900 font-semibold">Logo</span>
        <div className="flex space-x-4 text-gray-900">
          <a href="#">Dashboard</a>
          <a href="#">About</a>
          <a href="#">Projects</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
  </nav>

这些风格很多都不言自明，但我想再补充几点：

• 导航元素应用了背景颜色。如果没有背景颜色，筛选类就无法进行模糊处理！
• 导航元素是固定的——如果我们向下滚动页面时看不到导航栏，那么给导航栏赋予玻璃质感就毫无意义了！
• 导航栏应用了 z-index 属性，这样其他元素就不会破坏整体视觉效果。

此时，导航栏应该看起来像上图一样。如果向下滚动页面，它应该会固定在屏幕顶部。不错！

应用背景滤镜和背景模糊实用程序类

框架已经搭建完毕，接下来让我们添加魔法吧。✨

为导航元素添加backdrop-filterand实用程序类。backdrop-blur-lg

<nav className="... backdrop-filter backdrop-blur-lg">
    ...
</nav>

此时向下滚动页面，似乎没有任何变化。虽然实用类正在运行，但我们需要调整导航栏的背景透明度才能使其显示出来。

背景透明度越低，元素下方显示的内容就越多。您可以随意调整这个值。我已经把这个bg-opacity-30类添加到我的导航栏了。

<nav className="... bg-opacity-30">
    ...
</nav>

导航栏现在呈现出一种玻璃质感，增添了炫酷的效果，同时又不会过多影响用户的网站体验。我们本来可以就此止步，但还有一件事我们可以做。

目前来看，磨砂玻璃导航栏很难与网站背景区分开来。

添加一条略微下移的边框，可以让醒目的颜色与导航栏的模糊背景形成对比，从而在视觉上标示出元素的边界。这种细微的调整，却为整体呈现效果增添了全新的层次感。

<nav className="... border-b border-gray-200">
    ...
</nav>

太棒了！我们现在已经添加了在导航栏上实现玻璃变形效果所需的所有样式！

但是，如果您在多个现代浏览器上测试您的更改，您可能会注意到一个错误……

别忘了火狐浏览器。

没错。如果你在 Firefox 上预览更改，你会发现模糊效果根本没有显示出来。

原来，Firefox 不支持 CSS 的 background-blur 效果。那么有什么变通方法呢？

幸好，Sam Selikoff 在 Twitter 上发布了他自己编写的自定义版本。该版本专门针对使用 Firefox 的用户，以便我们能够仅在这些设备上增加导航栏的透明度。

打开 tailwind.config.js 文件，并在plugins属性下添加以下代码。

const plugin = require('tailwindcss/plugin');

module.exports {
    ...
    plugins: [
        ...
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
}

现在返回导航栏，并添加以下类：

<nav className="... firefox:bg-opacity-90">
    ...
</nav>

虽然导航栏没有模糊，但透明度略有提高，不过仍然保持了半透明效果。

何时应使用玻璃态

虽然使用这种设计潮流来构建整个用户界面可能很诱人，但请注意，由于其半透明的特性，它存在可访问性问题。

如果使用玻璃态，请谨慎使用。

有关玻璃变形技术无障碍最佳实践的更多信息，请阅读 Aimee Liang 的这篇文章。

关于自动前缀生成器的简要说明

上周末我更新网站导航栏时，发现了一个类似于 Firefox 的问题，但这个问题出现在 Safari 浏览器（以及我的所有移动设备）上。经过几个小时的调试和网上搜索，我发现原来我的 postcss.config.js 文件中没有安装或配置autoprefixer，所以元素没有添加正确的浏览器前缀。哎呀！

结论

TailwindCSS 不断改进，随着 v2.1 的发布，现在支持许多 CSS 过滤器以及相关的实用程序类。

感谢阅读！

如果您喜欢这篇文章，请考虑订阅我的开发者新闻简报！

如果你想每天了解我的最新动态，请在Twitter上关注我！