このサイトの一部の画像（写真）にうっすら影をつけていますが、元の画像をいじってるんじゃなくて背景に同じぐらいのサイズの画像をbackground-imageで指定してるだけです。なのでサイズが全然違うものに適用してしまうとすごくマヌケなものになっちゃいます。
＋
＝
cssの設定はこんな感じ
.flyer {
background-image: url(./images/flyer_shadow.jpg);
background-repeat: no-repeat;
background-position: 6px 11px;
padding: 5px 6px 6px 0px;
}htmlのソースは
<div class="flyer"><img alt="pumpin0404.jpg" src="http://www.stupid-net.com/x/mt/archives/images/pumpin_0406.gif" width="130" height="184" border="0" /></div>background-repeatで背景画像を繰り返し表示しないように設定、background-positionで表示開始位置を少しずらしてます。paddingで下側と右側に影の部分をずらした分だけ余白を設定しておきます。そうしないと影が途中で切れちゃいます。 あとはブラウザで確認しながらいい感じになるまでbackground-positionとpaddingの値を調節すれば完成です。
[ css ]
