背景パターンをCSSで実装できる「pattern.css」

おはようございます。社員Aです👩

今回は、背景パターンをCSSで実装できる「pattern.css」の使い方を解説します！

クラスを指定するだけ！背景パターンをCSSで実装

今まで画像を使わないと実装できなかった背景パターンですが、

CSSでクラスを指定するだけで簡単に実装できるそう。

その種類は、チェックやストライプ、ドットなどの定番パターンから

ジグザグやトライアングルなどデザインに差がつく特殊なパターンまで豊富に用意されています。

「pattern.css」の読み込み方

ここからは、実際の使い方を解説していきます。

公式ページからファイル一式をダウンロードします。

公式ページの「GET STARTED」から、ファイル一式をダウンロード。

bansal.io

 

23 Users

332 Pockets

pattern.css - Background Patterns in CSS

https://bansal.io/pattern-css

CSS only library to fill your empty background with beautiful patterns.

CSSをヘッダーに読み込む

パスは配置した場所に合わせて変更してください。

<link href="/pattern.css" rel="stylesheet">

「pattern.css」パターンの使い方

読み込みが終わったら、背景パターンにしたい要素にクラスを付与します。

パターンの指定

パターンは全12種類。

実際のパターン例をご紹介します。

末尾の「xx」部分には、後述するサイズを指定します。

pattern-checks-xx

pattern-grid-xx

pattern-dots-xx

pattern-cross-dots-xx

pattern-diagonal-lines-xx

pattern-horizontal-lines-xx

pattern-vertical-lines-xx

pattern-diagonal-stripes-xx

pattern-horizontal-stripes-xx

pattern-vertical-stripes-xx

pattern-triangles-xx

pattern-zigzag-xx

サイズの指定

1. sm
2. md
3. lg
4. xl

上記の4サイズが用意されています。

パターンのクラス名のあとに「-sm」や「-md」を付与することでサイズが調整できます。