drop-shadow:透明背景の画像に影をつける
透明画像に影をつけたいと思って、box-shadow を使っても画像全体に影がかかってしまいます。
透明になっている箇所には影がつけたくない、という場合にはfilter: drop-shadow を使うことで解決します。
code:css
.drop-shadow {
filter: drop-shadow(23px 14px 7px #000);
}
元の透明画像
https://dl.dropbox.com/s/vnt3wrqvdmu1stz/%E9%9B%BB%E6%B3%A2%E5%A1%94%E3%81%AE%E7%84%A1%E6%96%99%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B33.png?dl=0
box-shadowの場合
https://gyazo.com/98f8174b631a942c15fd383a61b7f516
filter: drop-shadowの場合
https://gyazo.com/e695c8defc4ec201ef46b9ceaab21f59
codepen
https://codepen.io/sinobata/pen/LYWzNeV
#css
Created by tabata