Webサイトの背景というと、一色で塗りつぶされたものをつい想像してしまいます。派手なものになると画像を使いますが、用意するのも面倒です。もう少し手軽に、それでいて印象深い方法はないでしょうか。 そこで使ってみたいのがpattern.cssです。繰り返しのパターンを背景に適用できるCSSライブラリです。

pattern.cssの使い方

スクリーンショット多めです。まず縦縞。

テキストに適用することもできます。

画像の影として。

チェック。

グリッド。

ドット。

縦縞。

横縞。

斜め。

ストライプ。

三角。

ぎざぎざ。

pattern.cssを使えばDOMの背景をパターンで塗りつぶすことができます。CSSだけなので軽量ですし、色を変更したりするのも簡単です。派手なカラーリングだけでなく、ボタンなどにさりげなく使ってみるのもよさそうです。

pattern.cssはCSS製のオープンソース・ソフトウェア（MIT License）です。

pattern.css - Background Patterns in CSS bansal-io/pattern.css: CSS only library to fill empty background with beautiful patterns.