首頁 >web前端 >css教學 >使用 CSS 網格和 SVG 濾鏡進行藝術創作

使用 CSS 網格和 SVG 濾鏡進行藝術創作

Patricia Arquette
Patricia Arquette原創
2024-12-09 14:52:14934瀏覽

您是否探索過網格自動流的力量:密集?當與隨機生成的值(限制在設定範圍內)結合使用時,您可以使用網格列和網格行屬性來創建很酷的基於網格的藝術。讓我們開始吧!

首先,讓我們建立一個基本網格結構:

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}
  • display: grid: 建立 CSS 網格佈局。
  • grid-auto-flow: 密集:透過重新定位項目以最小化空白空間來自動填滿網格中的間隙。
  • grid-template-columns:定義響應式列佈局。這裡,自動建立列來填入可用空間(自動填入),每個列的最小寬度為 --w (預設為 4cqi),最大寬度為 1fr。

此時,--w未定義,因此使用預設值(4cqi)。初始網格如下圖所示:

Art with CSS Grid and SVG filters

接下來,我們將用一堆 -節點填滿網格。當我們使用 JavaScript 渲染它們時,我們為每個節點添加 2 個變數:

  • --gc:要跨越的列數。
  • --gr:要跨越的行數。

以下是我們如何在 JavaScript 中產生隨機值:

const random = (min, max) => 
  Math.random() * (max - min) + min

const column = () => 
`--gc:${Math.floor(random(0, 4))};`

const row = () => 
`--gr:${Math.floor(random(0, 3))};`

在 CSS 中,我們應用這些自訂屬性:

b {
  background: oklch(var(--l) var(--c) var(--h) / var(--a));
  grid-column: span var(--gc);
  grid-row: span var(--gr, 1);
}

我們也可以使用一個小輔助方法在 oklch 中加入一些隨機顏色:

const color = () => `--l:${
  random(0, 100)}%;--c:${
  random(0, 0.5)};--h:${
  random(0, 60)};--a:${
  random(0.2, 1)};`

現在我們得到:

Art with CSS Grid and SVG filters

謝謝你,grid-auto-flow:密集!

為了讓事情更加動態,讓我們加入旋轉和縮放等轉換:

b {
  rotate: var(--r);
  scale: var(--s);
}

在 JavaScript 中,我們產生隨機轉換值:

const transform = () => 
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`

我們來看看:

Art with CSS Grid and SVG filters

太棒了!現在,為了更進一步,讓我們添加一些很酷的 SVG 濾鏡。

在 JavaScript 中,我們新增了另一個小輔助方法來為每個 節點選擇一個隨機過濾器:

const filter = () =>
  `--url:url(#${
    [
      "pencilTexture",
      "pencilTexture2",
      "pencilTexture3",
      "pencilTexture4",
    ][Math.floor(random(0, 4))]
  });`

這給了我們:

Art with CSS Grid and SVG filters

現在,透過簡單地調整 --w 屬性和元素數量,我們就可以產生截然不同的藝術作品:

Art with CSS Grid and SVG filters

或:

Art with CSS Grid and SVG filters

我們也可以在顏色方法中調整開始值和停止值:

Art with CSS Grid and SVG filters


示範

這是一個 Codepen 演示。我在圖稿下方新增了控件,因此您可以輕鬆調整屬性:

以上是使用 CSS 網格和 SVG 濾鏡進行藝術創作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn