ジグザグや縞模様などの背景パターンのCSSコードを生成するサイトCSS Background Patterns by MagicPatternを使ってCodePenを使っていくつかパターンを生成したので紹介する。
基本的な使い方は
に紹介されているが、Back Colorで背景色、Front Colorで模様の色を指定、さらにOpcityでは透明度、Spacingは模様の細かさも指定できる。あとは22のパターンの中から右上のCopy CSS codeをクリックするとCSSコードがクリップボードにコピーされるので、エディタに貼り付ければよい。またPreview patternをクリックするとサイトの背景の模様として表示される。
以下、ジグザク、Isometric、波紋模様を適当なHTML構造を設定して生成してみた。自動生成以外ではかなり面倒なので本当に便利!
See the Pen Background-gen by ATATAT (@atatat) on CodePen.
ブログテーマやサイトのデザイン用に参考になると思う。
