CSS グリッドと SVG フィルターを使用したアート-CSSチュートリアル-php.cn

CSS グリッドと SVG フィルターを使用したアート

Patricia Arquette

リリース： 2024-12-09 14:52:14

オリジナル

966 人が閲覧しました

グリッド自動フロー: 密度の威力を調べたことがありますか?ランダムに生成された値 (設定範囲内に制限) を組み合わせると、グリッド列プロパティとグリッド行プロパティを使用して、クールなグリッドベースのアートを作成できます。飛び込んでみましょう!

まず、基本的なグリッド構造を作成しましょう:

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}

ログイン後にコピー

display:grid: CSS グリッドレイアウトを確立します。
Grid-auto-flow: Density: アイテムの位置を変更して、空のスペースを最小限に抑え、グリッド内のギャップを自動的に埋めます。
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)};`
ログイン後にコピー

これで次のことが得られます:

ありがとう、grid-auto-flow:density!

物事をより動的にするために、回転やスケーリングなどの変換を追加しましょう:

b { rotate: var(--r); scale: var(--s); }
ログイン後にコピー

JavaScript では、ランダムな変換値を生成します。

const transform = () => `--r:${random(-2, 3)}deg; --s:${random(0.8, 1.2)};`
ログイン後にコピー

チェックしてみましょう:

ファンシー！ここで、さらにレベルを上げるために、クールな SVG フィルターを追加しましょう。

JavaScript では、 ノードごとにランダムなフィルターを選択する別の小さなヘルパーメソッドを追加します。

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

これにより次のことがわかります:

ここで、--w プロパティと要素の数を調整するだけで、大きく異なるアートワークを生成できます。

または:

カラーメソッドで開始値と終了値を調整することもできます:

デモ

これは Codepen のデモです。アートワークの下にコントロールを追加したので、プロパティを簡単に調整できます:

以上がCSS グリッドと SVG フィルターを使用したアートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。