背景デコレーション
bgGrid
ドット・ライン・クロスの繰り返しパターンを背景に敷く静的な装飾。テクニカル・ミニマルな演出に。
デモ
概要
CSS の background-image に repeating-gradient を使った静的パターン装飾です。アニメーションはなく、軽量かつシンプルに使えます。type パラメータで3種のパターンを切り替えられます。
パラメータ
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
type |
文字列 | "dots" |
パターン種別: "dots" / "lines" / "cross" |
color |
文字列 | "rgba(2,93,204,0.1)" |
パターン色 |
gap |
数値 | 24 |
パターン間隔（px） |
size |
数値 | 2 |
ドット半径 or ライン幅（px） |
使用例
{% from "components/macros.njk" import bgGrid %}
{# ドットグリッド #}
{{ bgGrid("dots", "rgba(2,93,204,0.1)", 28, 2) }}
{# ラインパターン #}
{{ bgGrid("lines", "rgba(2,93,204,0.08)", 32, 1) }}
{# クロスパターン #}
{{ bgGrid("cross", "rgba(2,93,204,0.12)", 24, 1) }}
CSS クラス
| クラス | 説明 |
|---|---|
.bg-grid-layer |
コンテナ（パターンは inline style で注入） |