小粋空間

画像にドロップシャドー(影)を付ける方法を紹介いたします。



元ネタの小粋空間さんは下記のサイトを参考になさったようです。
目を通しておくと勉強になりますよ。

• 1976design.com：Easy CSS drop shadows
• A List Apart：CSS Drop Shadows
• nlog(n)：アップロードした画像に影をつけるには
• POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる
• 今日の覚え書き：cssの設定で自動的に画像に影を付ける
• 花と写真とblogと。：画像に影をつけてみる。

HTMLコード

<span class="shadow"><img src="/wp-content/uploads/2007/10/doughnuts.jpg" alt="doughnuts" /></span>


CSSコード

span.shadow {
background: url("images/shadow.png") right bottom;
}
span.shadow img {
position: relative;
left: -5px;
top: -5px;
padding: 0;
background: #ffffe0;
border: 1px solid #999999;
}



こういう小技CSSっていうのは、初めて考える人はすごいですね。
言われれば「できる」というのはわかるのですが…。

こういう風にあまり広まっていない使い方を見つけたら此処で公開します。

• タグ
• CSS
• HTML
• ドロップシャドー
• 画像