CSSで様々な背景パターンを実装できるスタイルシート「pattern.css」

CSSで様々な背景パターンを実装できるスタイルシート「pattern.css」

「pattern.css」は、任意の要素に特定のclassを付与するだけで様々な背景パターンを適用することができるスタイルシートです。
チェック・ドット・ライン・ジグザクなど種類も豊富で、CSSなのでサイズ調整やカラー調整も容易にできるようになっています。

パターン例

上のイメージは配布サイトの一部をキャプチャしたもので、これらもすべてCSSのみで再現された背景パターンになります。

使用する際は必要なCSSを読み込んで、適用したい要素に.pattern-{type}-{size}のようなルールでclassを付与します。
サイズはsm, md, lg, xlの4種類で、先述したclassルールの{size}の部分に任意のものを指定します。
{type}にはどのような背景タイプを使用するかを指定し、現時点では下記12種類が用意されています。

  • Checks .pattern-checks-{size}
  • Grid .pattern-grid-{size}
  • Dots .pattern-dots-{size}
  • Cross Dots .pattern-cross-dots-{size}
  • Diagonal Lines .pattern-diagonal-lines-{size}
  • Vertical Lines .pattern-vertical-lines-{size}
  • Horizontal Lines .pattern-horizontal-lines-{size}
  • Diagonal Stripes .pattern-diagonal-stripes-{size}
  • Vertical Stripes .pattern-vertical-stripes-{size}
  • Horizontal Stripes .pattern-horizontal-stripes-{size}
  • Triangles .pattern-triangles-{size}
  • Zigzag .pattern-zigzag-{size}

上記を踏まえ、例えば「ミディアムサイズのチェック柄」なら.pattern-checks-md、「スモールサイズの斜め線」なら.pattern-diagonal-lines-smといった形でclassを指定すれば、その部分に背景パターンが適用されるのを確認できます。
また、配布サイトではセパレータ・テキスト・イメージ装飾といった具体的な使用例も紹介されているので、そちらも使い方の参考になると思います。

ファイル読み込みについては、npm経由・CDN・ファイルダウンロードとひと通りの方法が用意されているので環境に合わせて使うことができます。
また、もう少し自分好みにカスタマイズして使いたい場合は、SCSS内の$pattern-sizes$dots辺りの値をいじるなどして対応できます。

ライセンスはMIT Licenseです。

Close the search window,
please press close button or esc key.