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

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

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

サイトのキャプチャ

pattern.css
pattern.css -GitHub

pattern.cssの特徴

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

pattern.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を使用して、パターンを実装してみました。
シンプルにカラーは無しにしています。

pattern-horizontal-lines-md

.pattern-checks-md

.pattern-dots-md

.pattern-grid-md

.pattern-diagonal-stripes-md

.pattern-zigzag-md

sponsors

top of page

©2020 coliss