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