使用粒狀漸變塊裝飾網頁

昨天,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 獲得.

來源

相關文章