CSS3になってからというもの、CSSでも様々な模様をデザインできるようになりました。
グラデーション縞模様、ましてやチェック模様などなど。

今までは画像を作成し、それを背景指定するなどしてデザインしていたものが、CSSのみで設定できるようになったというのはデザインをするうえで
「ここのグラデーションの色を変更したいな」
なんて思った時にもCSSで変更したい色を指定すればすぐ変更できるというメリットがあります!
画像でグラデーションを作っていた時には、新たに画像を作らなければならなったという手間がなくなった…というのは大きいなぁ、と。

ただCSSでグラデーションなどのデザインを設定するというのは、CSSについて知識がないとなかなか設定できないというのが問題点だったりもします。

そんな最中、ネットをいろいろ回っていたらグラデーションなどのCSSをジェネレーターで作ってくれるサイトを発見したので、今回紹介したいと思います!

ジェネレーターがあるサイトとは??

 今回紹介するサイトは「CSS3 Sample」になります!

このサイトにはグラデーションや縞模様などなどサイトをデザインするうえで必要になりそうな模様をCSSで作ってくれるジェネレーターがあるので、自分が設定したい色のカラーコードを入れたり、線の太さを設定するなどして自分好みのものができあがります!

試しに以下のような縞模様を上記サイトのジェネレーターにて設定しました。

まとめ

 このようにジェネレーターを使って様々な模様をCSSで設定できる…というのはサイトをデザインするうえでの強みになると思うので、是非ともこのジェネレーターを活用してみてはいかがでしょうか??

スポンサーリンク