Webページの背景デザインを考える

Webページの背景を考えてみます。
ページ全体からセクションごとの背景など、
以前より背景を切り替える場面は増えたことで、悩む機会も増えました。
ということで、いろんな背景を調べてみました。

1. CSSでお手軽に繰り返しパターンをつくる

CSS背景ジェネレートサイトで、
cssの背景パターンを簡単に作ることができます。
画像と違って、後から微調整が簡単なのもいいですね。

Pattern CSS

CSS Background Patterns by MaginPattern

【コピペOK】CSSだけで作る背景パターンのサンプルコード25選＋α by PhotoPizza

2. 動く背景をつくる

Webデザイン　背景アニメーション/エフェクト15選 by DAI from note
動く背景をサンプルコード付きで紹介しているnoteの記事です。

【CodePen】バックグラウンド(背景)アニメーションのアイデア20選 by WebClips
CodePenからCSS・Javascriptなどで表現された背景アニメーション・パターンアニメーションのアイデアをまとめた記事です。

3. イケてる背景をみてみる

背景が動く！by SANKOU!
背景が動くイケてるサイトを集めているサイトです。

アニメーションが参考になるWEBサイト10選 by TOMORROW GATE
Webサイトのアニメーションづくりで参考になるサイトを紹介しています。

今回は以上です！