背景作りって
地味にめんどくさい！！
筆者の見出しの使い方のほうがめんどくさいよ、
この冒頭で見る気も失せてしまった！なんて…
そんな寂しいこと言わないで…！ゆるりと見ていってくださると嬉しいです☺
本題ですが、デザインする上でパターン作る際、少しズレただけですごい違和感を感じるし
それを調整するのに地味に時間かかる…と思ったことはありませんか？
しかし画像でパターンを作ってこそ可愛いパターンって沢山あって
デザイナーさんでもそこがこだわりだから！という方も多いと思います。
ですが、簡単などこにでも使えるパターンをこだわりのパターンと併用することで
時間短縮になり、他のところのデザインに時間を使えるのでは無いでしょうか🧐
しかもcssをコピペして色変えるだけで使えるなら便利ですよね…！
と思ったので早速集めてみました✨
1. 横ストライプ
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
細い横ストライプ
数値を調整するだけで線を細くできます🌟お好みで☺
この後の縦ストライプも数値を調整して線を細くしたり太くしたりできます☺
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
2. 縦ストライプ
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
3. 斜めストライプ
右上がりです☺
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
逆バージョン！
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
4. ギンガムチェック
かわいい…
濃い色で使うといかにも！という感じですが、
薄い色を使って淡く使うのも使い所位によっては可愛い気がします！
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
5. ドット
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
ピンを打ったようなドット
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
6. 格子
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
See the Pen Untitled by miyazaki wakana (@wakana-m) on CodePen.
最後に🌈
いかがだったでしょうか
こんなの知ってるよ！という方もとても多いと思うのですが
知らなかった！使ってみたいなと思った方は活用してみてください☺
少しでも皆さんと私の作業に余裕ができますように！🍀
参考にしたサイトなど
CSSの背景パターンをまとめたサイトを紹介されているサイトもありました！