数枚の背景画像を使って面白い背景画像を設定するCSSサンプル
2009年08月17日-
スポンサード リンク
#68: Think Geek Background Fade Technique | CSS-Tricks
数枚の背景画像を使って面白い背景画像を設定するCSSサンプル。
静止画では説明しにくいのですが、画面をスクロールすることで面白い効果が得られます。

↓↓スクロールでグラデーションが濃くなる

とりあえず、デモページ を見るのがよいですね(^^;)
fixedで固定にするのと、そのままスクロールさせるものを組み合わせて透過PNGで実現されてますね。
CSSは以下のように3枚の画像を使ってるみたいです。
body { background: #404143 url(../images/bodytiletop.jpg) repeat-x; }
#page-wrap { background: url(../images/bodytilebottom-tall.jpg) repeat-x left bottom; }
#fancy-fancy { background: url(../images/circlepattern.png) fixed repeat-x -275px bottom; }
#inner-wrap { width: 550px; background: white; margin: 0 auto; min-height: 2000px; }
応用してもっと面白いことが出来るかも。例えば、複数枚で違う色のグラデーションを組み合わせてみるとか。
数枚の背景画像を使って面白い背景画像を設定するCSSサンプル。
静止画では説明しにくいのですが、画面をスクロールすることで面白い効果が得られます。

↓↓スクロールでグラデーションが濃くなる

とりあえず、デモページ を見るのがよいですね(^^;)
fixedで固定にするのと、そのままスクロールさせるものを組み合わせて透過PNGで実現されてますね。
CSSは以下のように3枚の画像を使ってるみたいです。
body { background: #404143 url(../images/bodytiletop.jpg) repeat-x; }
#page-wrap { background: url(../images/bodytilebottom-tall.jpg) repeat-x left bottom; }
#fancy-fancy { background: url(../images/circlepattern.png) fixed repeat-x -275px bottom; }
#inner-wrap { width: 550px; background: white; margin: 0 auto; min-height: 2000px; }
応用してもっと面白いことが出来るかも。例えば、複数枚で違う色のグラデーションを組み合わせてみるとか。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ