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

         

CSS

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

2021年08月05日 8:00 

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

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

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

 



 

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

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

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

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

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

 

 

「pattern.css」の読み込み方

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

 

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

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

 

CSSをヘッダーに読み込む

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

 

 



「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」を付与することでサイズが調整できます。

例:pattern-grid-sm

 

関連記事

この記事を書いた人

社員A

入社7年目。フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。 一人旅が好きで、主に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい!