数枚の背景画像を使って面白い背景画像を設定する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
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ