css3のbox-shadowを使うと(ベンダープレフィックスが必要だけど)簡単に影をつけられる。
でもってこれを、透過png(アルファチャンネル付きpng)に指定した場合、photoshopの対象レイヤー右クリック – [レイヤー効果] – [ドロップシャドウ] (もしくは [レイヤー] – [レイヤースタイル] – [ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?
それとも画像の外側に四角い影がつくのだろうか?
ドロップシャドウのようになったら素敵だなぁと思って試してみました。
box-shadowテスト1
まずは普通に。
-moz-box-shadow:0 0 20px #f33; -webkit-box-shadow:0 0 20px #f33;
あぁ、いきなりダメだ、切ない。
box-shadowテスト2
意味ないだろうけど内側に指定してみる。
-moz-box-shadow:inset 0 0 100px #f33; -webkit-box-shadow:inset 0 0 100px #f33;
ちゃんと画像の下に影が入ってるなぁ。
text-shadowだったら?
imgはインラインだし、どうだろう?
p ,p img{text-shadow:#f33 0 0 10px;}
まぁそうだろうねぇ。
ちなみにIEのfilter:growだと
photoshopのドロップシャドウ風になってしまった。
関連記事かもしれん:
乱雑モックアップのフィード