使用粒状渐变块装饰网页

昨天,Kelly Choyce-Dwan 发布了增强型 Spacer 型积木。 但是,最终用户可以使用各种渐变背景来装饰该区域,而不仅仅是屏幕上的空白区域。

粒状渐变块 只是我期待修补的插件类型。 它并不复杂。 它停留在它的车道上。 而且,使用起来很有趣。

该街区的灵感来自颗粒状渐变趋势 被 CSS-Tricks 吹捧 2021 年。现在,用户可以直接在 WordPress 编辑器中使用它们。

该插件的单个块有四种变体,如以下屏幕截图所示:

decorating-web-pages-with-the-grainy-gradient-block 使用 Grainy Grainy 渐变块装饰网页

变化是:

  • 默认值:嘈杂/粒状纹理。
  • 水平纹理:水平线。
  • 垂直纹理:垂直线条。
  • Blob Grain:类似于熔岩灯的效果。

在用插件尝试新的设计理念花了太多时间之后,我终于找到了我喜欢的东西。 我拉了一个 日落图像 来自 Mark Westguard 的 WordPress Photos 并在封面块中使用它。 然后,我在它上面应用了几个不同的 Grainy Gradient 块。

decorating-web-pages-with-the-grainy-gradient-block-1 使用 Grainy Gradient 块装饰网页在湖的粒状日落。

目标是给它一种古老的、破旧的绘画感觉。 我对它的结果和我所经历的其他几个变化感到满意。

我想看看我能用一些现实世界的艺术做什么——那时我脑子里有画。 所以,我抓了一张我在一两周前完成的作品的照片,然后重新开始。

这一次,我使用了类似的过程。 我将所有内容都包裹在 Cover 块中,并在图像上应用了双色调滤镜。 然后,我将 Grainy Gradient 块放入内部并将其切换为 Horizo​​ntal Grain 变化。

decorating-web-pages-with-the-grainy-gradient-block-2 使用 Grainy Gradient 块装饰网页图像上的水平纹理。

结果类似于手绘作品的糟糕影印本。 从本质上讲,它比我原来的作品要好。

不要让我的想象力欺骗你,让你认为这个插件仅限于少数想法。 用户可以创建 1,000 多种变体。 例如,只需将其放在文本较多的部分旁边的列中就可以使页面的设计更加美观:

decorating-web-pages-with-the-grainy-gradient-block-3 使用 Grainy Gradient 块装饰网页文本列旁边的 Blob 渐变。

如果我有一个要求,那就是为 Group 和 Cover 块添加颗粒状的渐变背景。 两者都允许渐变,但不允许颗粒状的变化。 该效果是通过 SVG 过滤器创建的,这就是核心中双色调功能的工作原理。 似乎至少有一些 对其他过滤器类型的胃口. 也许我们将来会看到更广泛的此类选项列表。

现在,我想我会继续玩 Grainy Gradient Block。

该插件的开发版本也是 可通过 GitHub 获得.

来源

相关文章