使用 CSS Gradient 的缺陷实现噪点画面
使用 CSS Gradient 的缺陷实现噪点画面
theme: fancy
原文链接 # Making Static Noise From a Weird CSS Gradient Bug -- 作者 Temani Afif
你是否记得老式电视没有信号的噪点画面呢？或者说，当信号不好的时，失真的画面？如果你没有电视信号（失真）的概念，可以看下面的 GIF 图，你就会明白我说什么了。
是的。我们将仅使用 CSS 实现类似这样的画面。下面是我们实现的效果：
在开始讲解代码之前。我想说的是，有比我要讲的方法更好实现噪点效果的方法。我们可以使用SVG，<canvas>，过滤fliter属性等等。实际上，Jimmy Chion 写了篇使用 SVG 实现该效果的好文。
这里，我要做的是种 CSS 实验 -- 探讨一些使用 gradient 缺陷的技巧。你可以在自己的项目中使用但是在真实项目中使用 SVG 会更清晰且更合适。因为该效果因为不同的浏览器会有不同，所以你想检验该效果，最好是在 Chrome, Edge 或 Firefox 浏览器。
我们来制作噪点
制作这个噪点效果，我们将会使用到 gradients！是的，没有什么秘密的成分或者新的属性。我们将使用 CSS 工具箱里面的东西。
这个技巧依赖于 gradients 不利于抗锯齿的事实。当我们使用颜色强制停止渐变，我们就会得到这些锯齿边缘。我在自己大部分的文章中提到它们，因为它们有些烦人，我们总要添加或者删除一些像素来解决这些问题：
正如你看到的，第二个圆比第一个圆渲染得更好，因为渐变中的两种颜色之间有了 0.5% 的小差异。而不是像第一个圆那样使用整数值的直接强制停止渲染。
下面这个例子，是使用 conic-gradient，结果看起来更加明显：
当我做这些案例的时候，一个有趣的想法浮上脑海。与其总是修复这些失真的画面，那为什么不反其道而行呢？我不知道将会发生什么，但是这是个惊喜！我使用 conic gradient 值，然后逐个减少它，使糟糕的锯齿效果更加糟糕。
你看到最后一个是有多糟糕了？这是中间一个图的升级版，且没有任何地方是平滑的。我们将它设置更小的值并全屏查看。
我想你知道这是怎么回事。当我们在 gradient 中使用很小的数值来强制停止颜色渲染，我们在视觉上得到一个失真的画面。是的，噪点产生了。
我们离想要的颗粒噪点还很远，因为我们仍然可以看到实际的锥形渐变。但是，我们减少到很小很小的值 -- 0.0001% -- 然后突然就没有了渐变，只有纯粹的颗粒感。
不错哦！我们通过一行 CSS 渐变的代码就完成了噪点效果。我敢打赌，如果我没有向你解释它，直接展示给你看，你不会意识到你看到的是渐变。你必须很仔细去看画面渐变的中心才意识到。
我们可以通过调整其位置的同时，调整渐变的大小到非常大来增加随机性：
这个渐变应用是在 3000px 的正方形中，中心坐标是 60% 60%。在这个案例中，我们很难注意到它的中心。我们同样可以在 radial gradient 中应用：
为了让噪点更加随机（接近真实的噪点效果），我们结合了 gradients 和 background-blend-mode。
我们的噪点效果很完美了！即使我们很靠近查看。那里没有任何的渐变痕迹，而是美丽的颗粒静态噪点。我们只是将这个反锯齿的缺陷变成了一个巧妙的功能。
现在，我们实现了这个效果。让我们来看看有哪些有趣的应用。
没有电视信号时动画
回到开始的案例：
如果你查看了代码，你会发现我在一个渐变中使用 CSS 动画。它真的很简单，我们要做的就是快速改变锥形渐变中心位置。
我使用同样的技术在一个 div 实现 CSS 艺术挑战：
图片粒子过滤
另一个想法是，将噪点应用在图片上，以获得时代感。鼠标移动到图片上可查看原图。
我在伪元素上添加了一个渐变并且通过 [mix-blend-mode](https://css-tricks.com/almanac/properties/m/mix-blend-mode/): overlay 进行混合。
我们可以通过 filter 属性得到更有趣的效果。
如果我们在混合中使用 mask 属性，我们可以制作更多的效果。
粒子化文本处理
我们也可以在文本中应用此效果。重申一遍，我们需要的是一组链式的背景图过滤，然后混合背景。唯一不同的是，我们要用到 background-clip，所以效果只会应用在每个字符。
生成艺术品
如果你继续使用渐变值，你可以得到更加令人惊讶的结果。我们可以得到随机的形状，就像生成的艺术品。
当然，我们离真正生成的艺术品很远，这需要很多的工作。但是，我们仍然能够使用被认为是缺陷的技术来实现些令人满意的东西。
怪物面孔
最后一个案例，我在 CodePen’s divtober 2022 collection中的一个。
总结
我希望你喜欢这个CSS 小实验。我们实际上并没有学到什么“新“的内容，但是我们对 gradients 做了些怪异的更改，并将其变成有趣的东西。我想重申的是：我并不会在真实的项目中使用这些，因为谁知道何时解决这个反锯齿的问题呢。相反的，当我无意中发现了它，它给我带来了惊喜。它并不容易控制，并且在不同浏览器表现不一致。
也就是说，我很好奇你会实现什么效果！你可以修改值，组合不同的图层，使用 filter 或者 mix-blend-mode 或者其他方式，你肯定能得到非常棒的东西。在评论区留下你的创意 -- 没有奖品，但是我们可以收集精美的作品。
译者推荐阅读
本文正在参加「金石计划 . 瓜分6万现金大奖」