CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css

ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。

ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます。

pattern.css
pattern.css -GitHub

• pattern.cssの特徴
• pattern.cssの使い方
• pattern.cssのデモ

pattern.cssの特徴

pattern.cssはCSSのみのライブラリで、さまざまな要素の背景を美しいパターンで塗りつぶします。

• JavaScriptは一切無し、CSSのみのライブラリ。
• gzip圧縮で、1Kb未満。
• すべてのモダンブラウザをサポート。
• SCSSで構築。
• フルカラーコントロール。
• MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

pattern.cssを使用すると、ページ全体やテキストやボックスなど、さまざまな要素の背景をパターンで塗りつぶします。

ページ全体にパターンを適用

コンテンツの区切りにパターンを適用

フォント自体や文字の背景にパターンを適用

画像コンテナにパターンを適用

pattern.cssの使い方

使い方は、簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

CSSファイルはCDNでも用意されています。

npm経由でもインストールできます。

Step 2: HTML

あとは、要素にclassを適用するだけです。

Bootstrapなど、他のフレームワークにも利用できます。

pattern.cssのデモ

デモではさまざまな要素に適用したパターンを楽しめます。

pattern.css

実際にpattern.cssを使用して、パターンを実装してみました。
シンプルにカラーは無しにしています。