透過pngにbox-shadowを指定したらドロップシャドウみたいな効果を得られるか?

[追記]
filter: drop-shadowを使った方法が紹介されてました
透過pngにもそのままシャドウをかける事ができる filter: drop-shadow | memocarilog
2012年の記事だから今は他のブラウザにも実装されたのかしら?
[追記ここまで]

ドロップシャドウのイメージcss3のbox-shadowを使うと(ベンダープレフィックスが必要だけど)簡単に影をつけられる。

でもってこれを、透過png(アルファチャンネル付きpng)に指定した場合、photoshopの対象レイヤー右クリック – [レイヤー効果] – [ドロップシャドウ] (もしくは [レイヤー] – [レイヤースタイル] – [ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?
それとも画像の外側に四角い影がつくのだろうか?

ドロップシャドウのようになったら素敵だなぁと思って試してみました。

box-shadowテスト1

まずは普通に。

box-shadowテスト1
あぁ、いきなりダメだ、切ない。

box-shadowテスト2

意味ないだろうけど内側に指定してみる。

box-shadowテスト2
ちゃんと画像の下に影が入ってるなぁ。

text-shadowだったら?

imgはインラインだし、どうだろう?

text-shadowテスト1
まぁそうだろうねぇ。

ちなみにIEのfilter:growだと

filter:grow
photoshopのドロップシャドウ風になってしまった。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.