☰

CSS で PNG イメージにドロップ シャドウを付ける 質問する

tag-icon • tag-icon css image png transparency
CSS で PNG イメージにドロップ シャドウを付ける 質問する

自由形式（正方形ではない）の PNG 画像があります。

この画像にドロップシャドウ効果を適用する必要があります。

標準的なアプローチ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... この画像の影を正方形のように表示します。そのため、画像と、画像に表示されるオブジェクトの形に従わない正方形の影が表示されます。

適切に行う方法はあるでしょうか?

ベストアンサー1

はい、可能ですfilter: dropShadow(x y blur? color?)CSS またはインラインで次のように記述します。

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

おすすめ記事