人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ページの背景をグラデーションにし、ページの周りに影をつける方法を教えてください。

例えば下記のページのようにです。
http://www.cyberagent.co.jp/

よろしくお願いします。

●質問者: masterkton
●カテゴリ:ウェブ制作
✍キーワード:グラデーション
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● frosch
●30ポイント

http://www.cyberagent.co.jp/img/common/bggimg.jpg

実際に現物を見ていただいたほうがわかりやすいと思います。

上下にグラデーションが掛かった横長画像の真ん中に、ページの中身幅に合わせたシャドウを書き込んだものを背景に指定しているようです。


2 ● sainokami
●30ポイント

ページの背景にグラデーションの画像を使うことでできます。

例のページも画像が使われています。

http://www.cyberagent.co.jp/img/common/bggimg.jpg

画像の作成にはフォトショップやイラストレーターなどを使い、

背景に画像を設定するには

http://www.1uphp.com/con1/img/backgroundimgnorepeat.html

こんな感じで。

◎質問者からの返答

例えば、この画像を縦長のページに設定する場合はどうすればよいのでしょうか?

グラデーション上部の白部分とグラデーション下部のグレー部分がくっついて不自然になると思うのですが、何かいい方法はありますでしょうか?


3 ● sainokami
●40ポイント

画像のを繰り返して背景にするかどうかが設定できます。

スタイルシートを使うのですが、

背景画像を固定させることもできますし、繰り返し回数を指定することもできます。

http://www.chironoworks.com/kkhiro/HPS/Category/sample_category....

↑の背景・画像というところを参照してください

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ