画像に影付画像を背景に設定、影を上手に表現するコツ

このQ&Aのポイント
  • ホームページに影付きの画像を使用したい場合、イラストレーターで影を作り、フォトショップで画像化する方法があります。
  • 影の周りの余白の多さについては、切り取ることが難しい場合は気にする必要はありません。
  • 影の形や濃さをコントロールするコツがあります。さらに、正確な寸法を把握する方法もあります。
回答を見る
  • ベストアンサー

画像に影付画像を背景に設定、影を上手に表現するコツ

ホームページに影付きの画像を使用したく、 下記サイトを参考に作成しました。 All About form「画像を加工せず、複数の画像に「影」を付加」 http://allabout.co.jp/gm/gc/23995/ イラストレーターで影を作り、 フォトショップで画像化しました。 質問したいことは下記(1)~(3)です。 (1) サンプルの画像ですが、 左側の影のみが背景用に使用した画像で 右側がFirefoxで実際に表示した結果です。 左側のピンク色は、影の周りの余白の多さを 見せたかったから付けました。 かなり余白が多い気がします。 それを切り取ろうとしても 影がどこで終わっているのか分からず、 下手に手を出せませんでした。 この余白は気にする必要はないですか? (2) サンプル画像を見て頂くと、左側=右側、 とはならず影の形も濃さも変わってしまっています。 =にするコツがあれば教えて頂きたいです。 (3) 上記の参考サイト内で 「影の部分は、右側が幅7ピクセル、下側が高さ8ピクセル」 と、正確に寸法を把握しているのですが、 どのようにすれば分かるのでしょうか? 自分は、1px単位で何度も何度も微調整しましたが、 把握する方法があればとても助かります。 お願いします。 ~~~ 入力したソース ~~~ <style type="text/css"><!-- #shadow{ margin-left: 100px; margin-top: 100px; } #shadow img{ background-image: url("shadow_image.jpg"); background-repeat: no-repeat; background-position: right bottom; padding: 0px 60px 60px 0px; } --></style> <div id="shadow"><img src="sample.jpg" width="600" height="399"></div>

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

(1)見た感覚でトリミング。本当は白からグラデーションでぼかす。    この場合、出来れば上下左右のシャドウの幅を統一。    中の白枠を基点にカンバスを均等で広げれば良い。それで保存。 (2)下記に説明 (3)1pxではなく、大胆に数十px単位で変更してみる。 ============================= まず、1枚だけに影を付けるなら、 背景画像の影画像なんか作らずに、画像にシャドウを落とした方が良いのは知っていると思いますから割愛。 次に、同じサイズの画像を複数利用する場合には、 左の画像で、全方向のシャドウで問題無いのですが、 画像の大きさが毎回違う場合には、シャドウが毎回ズレますよ。 それを踏まえた上で、 解説サイトは、画像サイズに無関係で斜め方向のシャドウを表現する方法で、 画像の右と下にシャドウが出るCSSを解説しているのだと思います。 つまり、シャドウの使いまわす場合には有効な手段です。 この場合、右と下のシャドウを表現するだけなので、 上と左は切れても良いのです。 いえ、提示したCSSで 右の画像のようになるのが正しいく、何も問題なく表現されていますよ。 ----------------- 今の質問者さんが書いたCSSは、 左画像の右下に左背景(シャドウ)画像の右端60PXと下端60PX部分しか表示されていない状態です。 左画像のような全面シャドウを表現したければ、 左画像の中の白枠とピッタリのサイズに画像で、 例:各シャドウが60pxの場合、 #shadow{ margin-left: 100px; margin-top: 100px; padding: 60px; background-image: url("shadow_image.jpg"); no-repeat; } とすれば上下左右にシャドウが表示され、ピッタリ合うでしょう。 つまり、 1、左のシャドウ画像の内側の白枠と右画像の大きさをピッタリ合わせる。 2、シャドウ部分の幅を知る。 3、padding: 60px;の60の値を上記2のシャドウの幅を入力。 ----------------- ただ、このCSSを使えば良いという事ではなく、 そのCSSを修正しただけですから・・・ また、 画像が特大な上に(複数設置は重くなる)、margin-left: 100px;とpadding: 60px;なので、幅が最低でも820pxになっていますから、それ以上の外枠じゃないといけません・・・

tekkenman7
質問者

お礼

ありがとうございました。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

複数光源の影を正確にかつ、画像サイズに関わらずとなると 画像の左隅    画像の上辺+右上 画像の左辺+左下 右辺+画像の下辺+画像の右下 の四つの画像が必要です。 これをうまく配置するためには、HTMLで画像を最低3つの汎用ブロック内(後生成でもよい)に入れます。 例 <p class="Photo">  <div>   <a>    <img>   </a>  </div> <p>  とマークアップされていると、 p.Photo{backgroung:no-repeat;100% 100% url([URL]);} p.Photo div{background:no-repeat 0% 100% url([URL]);} p.Photo a{display:block;width:100%;height:100%;background:no-repeat 100% 0% url([URL]);} p.Photo a img{display:block;width:100%;height:100%;background:no-repeat 0% 0% url([URL]);}  とかですね。

tekkenman7
質問者

お礼

ありがとうございました。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

失礼、削除不足・・・ background-image: url("shadow_image.jpg"); no-repeat; じゃなくて、上記部分を下記に訂正 background: url("shadow_image.jpg") no-repeat;

tekkenman7
質問者

お礼

ありがとうございました。

関連するQ&A

  • divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。

    divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。 例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。 http://www.dai-ichi-life.co.jp/examine/search/index.html それには、 <div>○○</div>上用 <div>○○</div>真ん中用 <div>○○</div>下用 のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。 しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。 .box-top { height: 7px;←画像の高さ width: 200px;←画像の幅 background-image: url(images/r-menu-box-top.jpg); background-repeat: no-repeat; margin: 0px; padding: 0px; } このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。 なぜでしょう。

    • ベストアンサー
    • HTML
  • 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を

    背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを1024×768から1280×1024に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 - 画面サイズを変更すると位置がずれてしまうソース - @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- - HTML - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" />&nbsp;<img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- - 検索でヒットした位置指定のソース - @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- - HTMLは上記と同じ -

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • Mac OSX でのブラウズで、背景画像が表示されない現象

    cssで 背景画像指定、特定の画像だけ見れない状態の訴えです。私自身Macは持っておらず、検証できないのですが、訴えた本人もMacに詳しくないため、詳細内容不明です。ブラウザ種類、ブランクなのか、等、答えて貰えません。 div#MENUJPG { font-size: 16pt; margin: 0px; height: 230px; width: 540px; float: right; background: url('../img/bg/menu.jpg') no-repeat right top; } html上では、このdiv id="MENUJPG" の内部にp tag,a tag がいくつかありまして、メニューリンクとして、jpg上に文字を載せています。レイヤ状態で見えないのか??と思いきや、同ページの div#STAGE { margin: 0px; padding: 0px; height: 450px; width: 400px; float: left; background-image: url('../img/bg/butai.jpg') ; background-position: 50% 15%; background-repeat: no-repeat; } このjpgは見えているとのこと。このdiv 内も、p tagを使っており、文字をjpg上に載せています。違うのは background で一気に指定していることくらいです。 別ページにて、 p#BABY1 { width :300px; height :200px; float :left; background-image : url('../img/profile/baby.jpg'); background-repeat : no-repeat; margin: 0px; padding: 0px; background-color : #cccccc; } このタイプ、jpg,size,floatは異なりますが、同じスタイルで4つあり、全て見えないとのことです。 同サイト別ページにて、cssで同じように div id="XX"で背景画像指定している箇所がいくつかあるのですが、そちらは問題ありません。 id,float,background or backgroud-image,width,height,single quote,...と同じ使い方であり、原因不明で行き詰まっております。 似たような現象、または、考えうる原因、どうぞご示唆くださいませ。

  • CSSでドロップシャドウ

    CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか? --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }

  • 背景画像上に複数枚の画像配置について

    お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 1枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 (図が下手ですみません) わかる方、ご教示をお願いします。

    • 締切済み
    • CSS
  • CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?

    初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • 背景画像がつられてのびていくのはどうして?

    お世話になります。 画像ファイルがno-repeatと指定しているのに bの画像が下だけどんどん長くなっていくのが不思議なんですけど これはどういうことなんでしょうか? 教えてください。お願いします。 'HTML <div id="1"> <div id="2"> <div id="3"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> 'css #1{ width: 900px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-style: none; text-align: left; } #2 { width: 900px; padding: 0 0 0 0; border-style: none; background: #000 url("a.jpg") repeat-y; text-align: left; } #3 { width: 900px; padding: 0 0 0 0; border-style: none; background: url("b.jpg") no-repeat; text-align: left; }

    • ベストアンサー
    • HTML
  • div入れ子の背景画像

    【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout">  <div id="menu">メニュー</div>  <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか? 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • FireFoxで見るとdiv間に隙間が・・・

    divを3つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 IE6で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか? 直す方法があればご指導よろしくお願い致します>< <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。

    • ベストアンサー
    • CSS