粒状渐变

Kuri
847 阅读7分钟

粒状渐变

原文链接：https : //css-tricks.com/grainy-gradients/

浏览 Dribbble 或 Behance，您会发现设计师使用一种简单的技术为图像添加纹理：噪声。添加噪点会使纯色或平滑渐变（例如阴影）更加逼真。但是尽管设计师对纹理很感兴趣，但在网页设计中很少使用噪声。

在本文中，我们将生成彩色噪声，仅使用少量 CSS 和 SVG 为渐变添加纹理。好吧，让我们发出一些声音！

互动游乐场

在这里查看。了解正在发生的事情的最快方法是使用构成图层的参数。

img

诀窍：SVG 噪声和 CSS 渐变

img

本文中的核心技术建立在 Chris Pachl 对 Stack Overflow 对以下问题的回答之上：您可以向 CSS 渐变添加噪声吗？

诀窍是使用 SVG 过滤器来创建噪声，然后将该噪声应用为背景。把它放在渐变下面，提高亮度和对比度，就是这样 - 你的渐变会逐渐抖动。

关键成分

这是我们在幕后工作的内容：

  • **SVG 湍流：**这是我们的噪声过滤器。
  • **带有渐变和 SVG 的背景：**接下来，我们将该过滤器作为背景图像放入 CSS 中，该图像将过滤器与 CSS 渐变相结合。
  • **提升亮度和对比度：**然后我们转向 CSSfilter来增加噪声的亮度和对比度。
  • **混合渐变：**最后，我们可以选择使用mix-blend-mode进一步过滤掉颜色并将渐变混合在一起。

让我们详细介绍每个部分。

使用 SVG 湍流

在 SVG 领域内，我们可以定义过滤器，这样的过滤器可以让我们创建 Perlin 噪声。它被调用，我们可以定义属性，例如它是“湍流”还是“噪音”，以及它的精细程度或粗糙程度。Bence Szabó 在演示如何使用它来创建模式时更详细地解释了它。``

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

这个 SVG 示例创建了一个过滤器并渲染了一个<rect>元素，我们可以将其用于我们的粒状渐变。请注意，SVG<filter>是与 分开定义的<rect>，并且<rect>简单地引用了它。

尝试改变一些属性<feTurbulence>

我们将把这个 SVG 保存为一个单独的文件。我们在本文通篇的演示中引用了一个外部链接来获取 SVG。但在实践中，您会引用本地文件或您自己的 CDN。id由于某些奇怪的原因，在 CSS 中引用 SVG 是行不通的，但是您可以内联 SVG，正如我们在操场演示中展示的那样。出于易读性的原因，我们不在演示中这样做。

使用 SVG 和渐变创建 CSSbackground

在我们将 SVG 文件存储在某个可以通过 URL 或路径引用它的地方之后，我们现在可以在 CSS 中使用它background，并结合渐变。

.noise {
  /* ... */
  background:
    linear-gradient(to right, blue, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
}

订单在这里很重要。在这个特定的例子中，我们希望纯色（即没有噪声）转换为噪声，然后转换为另一种颜色。我们还希望渐变的一端是透明的，以便噪点显示出来。

像这样：

然而，这并不是特别好，因为噪音太混乱了。我们需要磨掉它，让它更颗粒。我们可以通过……

提高亮度和对比度

添加 CSSfilter会使噪音更加明显，将最褪色的颜色推向白色或黑色。过滤器适用于整个<div>，因此最左边的蓝色与我们开始使用的纯蓝色不同。

.noise {
  /* ... */
  background: 
    linear-gradient(to right, blue, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);  
}

您可以玩转对比度和亮度如何影响渐变。提高亮度和对比度会在下面的演示中推出混乱的灰色。

噪点颜色不均匀

如果放大，您会注意到噪点由多种颜色组成。SVG 滤镜一开始是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎不会引起注意，但如果这些五彩纸屑不受欢迎，我们可以继续使用 CSS 混合（即mix-blend-mode和）过滤掉颜色background-blend-mode。

CSS 混合

让我们制作一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们将另一个<div>标记添加到标记中，将其定位在原始渐变上，然后应用mix-blend-mode: multiply;平滑处理。

<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>

.noise {
  /* ... */
  background: 
    linear-gradient(20deg, rebeccapurple, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg); 
  contrast(170%) brightness(1000%);
}
.overlay {
  /* ... */
  background: moccasin;
  mix-blend-mode: multiply;
}

我们可以使用 CSS属性来创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略，渐变和叠加将与背景颜色混合。在 Pen 中尝试并注释掉该行！isolationisolation

/* 和之前一样 */

.isolate {
  isolation: isolate;
  /* ... */
}

一些用例

我们已经看过一个非常简单的示例，说明如何制作嘈杂的渐变，但是您可以在哪里使用？让我们考虑几个用例。

光影，带纹理

梯度自然发生在哪里？光与影，一方面。我们可以利用 CSS 属性mix-blend-mode平滑地混合渐变并有选择地过滤我们想要在噪波中看到的颜色。

在“阴影”示例中，我们创建了一个暗渐变，并将其反转以创建“亮”示例中的效果。在这两种情况下，都mix-blend-mode允许我们将其与其他渐变混合。

全息箔

强烈的亮度和对比度提升创造了让人联想到全息箔的彩虹效果。

更进一步

试试操场并弄乱不同的参数，看看它们如何影响纹理。

除此之外，这里有一些方法可以继续摆弄这项技术：

  • 使用不同的 SVG：本文中的所有渐变都使用相同的 SVG，但您可以使用产生噪声的参数来调整粗度以及操场中的外观和感觉。
  • **尝试不同的渐变：**此外linear-gradient，CSS 还提供了四种类型的渐变。你能说出它们的名字吗？（这是一个。）
  • **添加更多层：**通过 CSS 混合，您可以根据需要堆叠任意数量的层并将它们混合。
  • **应用不同的 SVG 过滤器：**有各种过滤器，包括高斯模糊和不同类型的照明。此外，它们可以在 CSS 过滤器中引用并应用于除 SVG 之外的任何元素。

你还能想到什么？请让我们知道您在评论中发现了什么。

浏览器支持

我们不能逃避在这里谈论浏览器支持。所有现代浏览器都支持此技术的核心。正如您所料，它在 Internet Explorer 中不起作用。也就是说，Internet Explorer 确实支持SVG 作为 CSS 中的背景（只是不支持实际的 CSSfilter属性）。

SVG 作为 CSS 背景图像

桌面

铬合金火狐IE边缘苹果浏览器
5249165

手机/平板电脑

安卓浏览器安卓火狐安卓iOS Safari
939234.2-4.3

CSS 滤镜效果

桌面

铬合金火狐IE边缘苹果浏览器
18*35不796*

手机/平板电脑

安卓浏览器安卓火狐安卓iOS Safari
93924.4*6.0-6.1*

我还注意到基于 Blink 的浏览器（例如 Chrome）和基于 WebKit 的浏览器（例如 Safari）的实现mix-blend-mode略有不同，因此如果使用 CSS 混合，请务必跨浏览器进行测试。在我自己的项目中，我使用特定于浏览器的媒体查询通过对 CSS 的小幅调整手动协调视觉差异。

就是这样！现在您已经掌握了 SVG 过滤器以及如何将它们与 CSS 过滤器作为背景相结合，您还有另一种简洁的视觉效果来为设计添加深度和纹理。

avatar
文章
阅读
粉丝