様々なタイプのCSS製の背景パターンを作成出来るスタイルシート・「pattern.css」

pattern.css

pattern.cssはCSSだけで作れる様々な背景パターンを手軽に作れるスタイルシートです

ドットや縦線、横線、斜めなどのストライプ、ジグザグなどを作成可能で、色やサイズも手軽に変更できるようになっています

以下、動作サンプルです

動作サンプル

テキスト、画像など、様々な要素にclass付与だけで利用できるよう設計されています

サンプルでは以前ご紹介したshorthand frameworkを併用しています

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

CSSを読み込みます

<div class="pattern-checks-sm bg-blue red">
	<h3 class="pattern-grid-sm bg-mint white text-pattern fw-800 fs-xl3 md-fs-xl4 lh-1 text-center">
		kachibito
	</h3>
</div>

背景を設定したい要素にclassを付与します。簡単ですね。ライセンスはMITとの事です

pattern.css