Kinarie&May

画像に影をつける

[Movable Type]

ちょっと前に、ネスケで崩れまくりのKinarie&Mayを見て、愕然としたｱﾀｼ。
おかしいとことろはいろいろあったんですが、一番おかしかったのは・・・
画像の影がネ、びょ～～～～んと伸びててヘンだったの
CSSのせいなんだろうけど、同じ方法で影をつけてるサイトを見てみても、ネスケでちゃんと表示されてる･･・なんでウチだけ？！
私の乏しい知識では、どこをどうしたら良いのかさっぱりわからず･･･
ﾄﾎﾎ

なので、前と違う方法で影をつけることにしました。
今回使わせていただいた方法はA List ApartのCSS Drop Shadowsです。

以下、オボエガキです。

①CSS Drop Shadowsで、説明文の中にある『GIF file/PNG file』をクリック、開いた画像を保存。
②ダウンロードしたshadow.gif と shadowAlpha.pngをサーバーにアップする。
③スタイルシートに以下のスタイルを追加する。

.img-shadow {
float:left;
background: url(http://・・・・shadowAlpha.png) no-repeat bottom right !important;
background: url(http://・・・・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: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

④画像をアップする時に画像リンクタグを

<div class="img-shadow">
<img src="・・・・・・.jpg" />
</div>

簡単にできました
これなら、ネスケで崩れないようなので、良かったぁ

2005,07,15 | CM (4) | TB (1) | wrote by Kazuko