CSSで背景を消したPNG画像に思い通りの影を付けたい・・・！？

CSSでPNG画像に画像に沿った影を!?
box-shadowは画像の周りだけ…!!

　例えば、この画像の様に背景を透明化したPNG画像がありますよね・・・

　影を付けたいとボックス要素に影をつけることができるCSSのプロパティのbox-shadowを使用して

• <div><img src="画像.png" style="width:180px;box-shadow:-10px 15px 10px #000000"></div>

と指図してみると右上の画像の様にボックスの外側に影が点くだけです・・・

　ならば、box-shadowには内側に影を付けるinsetプロパティが使えますので

• <div><img src="画像.png" style="width:180px;box-shadow:inset -10px 15px 10px #000000"></div>

と指図してみると左の画像の様にボックスの内側に影が点くだけです・・・

　だめですねwww・・・
　実は、画像に沿って影を付けるには、要素をぼかしたり、色相や彩度・明るさなどを変化させることができるfilterプロパティを使用します。
　このfilterにbox-shadowのように影を作ることができるdrop-shadowが使用できるんですよね。

• <div><img src="画像.png" style="width:180px;filter:drop-shadow(-10px 15px 10px #000000)"></div>

と指図してみると右上の画像の様に背景を透過させたPNG画像に影を付けることが可能なんですよね。
　皆さんのブログで試して見られたら一味変わった画像が出来上がると思いますよ。
　是非ご活用くださいね。