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

質問

ホームページに影付きの画像を使用したく、
下記サイトを参考に作成しました。

All About form「画像を加工せず、複数の画像に「影」を付加」
http://allabout.co.jp/gm/gc/23995/

イラストレーターで影を作り、
フォトショップで画像化しました。

質問したいことは下記（１）～（３）です。

（１）
サンプルの画像ですが、
左側の影のみが背景用に使用した画像で
右側がFirefoxで実際に表示した結果です。
左側のピンク色は、影の周りの余白の多さを
見せたかったから付けました。

かなり余白が多い気がします。
それを切り取ろうとしても
影がどこで終わっているのか分からず、
下手に手を出せませんでした。
この余白は気にする必要はないですか？

（２）
サンプル画像を見て頂くと、左側＝右側、
とはならず影の形も濃さも変わってしまっています。
＝にするコツがあれば教えて頂きたいです。

（３）
上記の参考サイト内で
「影の部分は、右側が幅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>

回答No.1

naokita · ベストアンサー

（１）見た感覚でトリミング。本当は白からグラデーションでぼかす。
　　　この場合、出来れば上下左右のシャドウの幅を統一。
　　　中の白枠を基点にカンバスを均等で広げれば良い。それで保存。

（２）下記に説明
（３）1pxではなく、大胆に数十px単位で変更してみる。

=============================
まず、１枚だけに影を付けるなら、
背景画像の影画像なんか作らずに、画像にシャドウを落とした方が良いのは知っていると思いますから割愛。

次に、同じサイズの画像を複数利用する場合には、
左の画像で、全方向のシャドウで問題無いのですが、
画像の大きさが毎回違う場合には、シャドウが毎回ズレますよ。
それを踏まえた上で、
解説サイトは、画像サイズに無関係で斜め方向のシャドウを表現する方法で、
画像の右と下にシャドウが出るCSSを解説しているのだと思います。
つまり、シャドウの使いまわす場合には有効な手段です。
この場合、右と下のシャドウを表現するだけなので、
上と左は切れても良いのです。
いえ、提示したCSSで
右の画像のようになるのが正しいく、何も問題なく表現されていますよ。
-----------------

今の質問者さんが書いたCSSは、
左画像の右下に左背景（シャドウ）画像の右端60PXと下端60PX部分しか表示されていない状態です。

左画像のような全面シャドウを表現したければ、
左画像の中の白枠とピッタリのサイズに画像で、
例：各シャドウが60pxの場合、
#shadow{
margin-left: 100px;
margin-top: 100px;
padding: 60px;
background-image: url("shadow_image.jpg"); no-repeat;
}
とすれば上下左右にシャドウが表示され、ピッタリ合うでしょう。

つまり、
１、左のシャドウ画像の内側の白枠と右画像の大きさをピッタリ合わせる。
２、シャドウ部分の幅を知る。
３、padding: 60px;の60の値を上記２のシャドウの幅を入力。
-----------------
ただ、このCSSを使えば良いという事ではなく、
そのCSSを修正しただけですから・・・
また、
画像が特大な上に（複数設置は重くなる）、margin-left: 100px;とpadding: 60px;なので、幅が最低でも820pxになっていますから、それ以上の外枠じゃないといけません・・・

お礼

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

回答No.3

ORUKA1951

複数光源の影を正確にかつ、画像サイズに関わらずとなると

画像の左隅　　　　画像の上辺＋右上

画像の左辺＋左下　右辺＋画像の下辺＋画像の右下

の四つの画像が必要です。
これをうまく配置するためには、HTMLで画像を最低３つの汎用ブロック内(後生成でもよい)に入れます。
例
<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]);}
　とかですね。

お礼

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

回答No.2

naokita

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

お礼

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