透明な背景のPNG画像にCSSシャドウを作成することはできますか？

Question

透明な背景のPNG画像にCSSベースのドロップシャドウを作成することは可能でしょうか？

おそらくCSS3、jquery、または最後にサーバー側ですか？私はacheiveしようとしています何の効果後

例：それは可能である

かなり確信している場合、それはクロスブラウザが、それはうまく分解する場合に適用して喜んではないでしょうか？

は

Answer 1

イメージをキャンバスコンテキストに読み込む場合、これを行うことができます。ここ

良いクリーンなソース：

http://philip.html5.org/demos/canvas/shadows/various.html

Answer 2

CSSは、画像の形状は、したがって、アウトラインを決定することはできませんし、それに影を適用することはできません、何であるかわかりません..あなたに入力し、オープンな技術の議論を追加すること自由に感じなさい。

イメージの黒いコピーを作成し、Zインデックス、方向オフセット、および一部の不透明度を使用してイメージの後ろに配置することができます。それはそれです。

Answer 3

不可能です。背景が透明であっても、イメージはまだ四角形であり、影は周囲の境界線に適用されます。

あなたができることは、pngにグラフィカルな影を直接置くことです。それは透明な背景の上で素晴らしい作品です。

Answer 4

GD PHPライブラリを使用することができます。このチュートリアルをチェックアウト：

http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/

私はPHPソリューションを使用すると、ブラウザ間で最も互換性であろうと推測します。

Answer 5

YES！ CSS3の透明な.pngに影をつけることは可能です！私はIE10でジャンクのように表示されていた1つのプロジェクトでこれを必要としました。ボックスシャドウを使用する代わりに、filter：drop-shadow（）を使用します。構文はほとんど同じです。ここでの記事です：link

最終的な解決策は、（リンクブレーク場合には）これです：

.filter-drop-shadow { 
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
}