我们喜欢的网站：MD Nichrome

这是一个漂亮的网站：它是 Mass-Driver 极其可爱的字体系列 MD Nichrome 的字体样本。网站中包含大量巧妙的动画和图形，解释了其中的所有功能……

如果您想知道这些动画是如何工作的，它们实际上是使用 <video> 元素进行样式化的。

还有一些很棒的图形设计元素，例如下面的字母是如何逐渐消失和淡出的……

这段 CSS 代码非常简洁。它使用 white-space 确保每个 <h1> 都保持在一行，然后为它们设置隐藏溢出，这样标题就会逐渐消失。淡出效果是由包含透明度的线性渐变实现的。在这种情况下，渐变实际上是 mask-image。这提醒我们，CSS 渐变是浏览器生成的图像。

h1 {
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}

在上图中，您还可以看到 Mass-Driver 如何宣传该字体的 OpenType 功能。这些功能包括分数或备用字母等，可以增强您文本的功能。默认情况下，这些部分会显示该功能是什么，但当您将鼠标悬停在其上时，它们会执行以下操作

.element {
  font-feature-setting: unset;
}

我认为我以前从未使用过 unset，但这是一个很好的使用场所——一开始显示该功能的外观，然后当您将鼠标悬停时，显示默认外观。非常聪明。

但吸引我注意力的部分——除了出色的排版——是背景。它由两个部分组成：一种闪烁动画，使页面看起来像纸张，以及叠加在它上面的渐变。深入研究 DevTools 后，我意识到这种闪烁效果是由 PNG 图像实现的，其中 background-position 属性会稍微移动图片，从而像 GIF 一样对其进行动画处理。图片中很难看出来，所以我做了一个模仿演示，将不透明度关闭，以便更清楚地看到

看到这种可爱的模糊感了吗？它赋予背景一种……纹理……我已经很久没有见过了，也许是 2008 年左右，当时每个人都试图让按钮看起来像网络上真正的模拟按钮。 Geoff 之前介绍过类似的技术，您可以深入了解它是如何工作的。

这个网站设计中的另一个部分是背景中的渐变。这些是如何变得如此平滑的呢？好吧，Rutherford Craze 是这个巧妙的网页设计背后的设计师，发布了一条帖子解释了他是如何在浏览器中实现这种效果的。他创建了一个 渐变工具，可以让您创建类似的效果

Rutherford 写道

传统的 CSS 渐变在颜色空间中绘制一条直线，直接从起始颜色到结束颜色进行插值。该工具将贝塞尔曲线的原理（数字字体的基础）应用于此操作。

通过在渐变中引入“控制点”，您可以更精细地控制插值，并生成更平滑的最终结果。然后，该工具对这种“贝塞尔渐变”进行采样，以生成可以在 CSS 中使用的线性渐变。

Rutherford 在上面描述的是所谓的 “灰色死亡区域” 渐变，在这种渐变中，线性渐变的中间通常会出现这种灰色。

另一个我几乎没有注意到的细节是 粘性导航： 当您第一次加载网站时，您只会看到徽标，而没有其他内容，但当您滚动时，您会看到导航，并且它会锁定在适当位置

请注意，粘性定位在后面也用于演示字体的字形。

CSS 使这种事情变得非常容易。在元素上声明粘性定位，然后在元素应从特定位置开始粘性时偏移粘性。

.sticky-thing {
  position: sticky;
  top: 75px;
}

由于他们希望您先关注字母，而不是所有其他 UI，因此将导航放在一边，仅在需要时才显示非常有意义。这使得整体设计感觉非常专注和直观，也许几乎不值得评论，但当大多数网站都充满了干扰时，我认为值得庆祝像这样的安静网站。