みかづきブログ その3

3ヶ月つづけてみました。

CSSで背景透過画像にshadowを落とす


f:id:kimizuka:20141207203658p:plain

こちらの背景透過画像にシャドウを落としてみましょう。

box-shadow


f:id:kimizuka:20141207203658p:plain

画像の縁にshadowを落とせます。

CSS

.img {
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

-webkit-filter: dropshadow


f:id:kimizuka:20141207203658p:plain

画像の縁ではなく、透過ではない部分にshadowを落とせます。

CSS

.img {
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
}

とても便利ですね。