memocarilog

こちらの記事「Bricss – box-shadow vs filter: drop-shadow」で知ったのですが、CSS Filter Effects の filter:drop-shadow を使ってドロップシャドウをかけると画像の透過したところにはシャドウをかけずに、Photoshopのドロップシャドウ機能のようにシャドウを使う事ができます。

下の画像左が透過pngに filter: drop-shadow をかけたものです。右は box-shadow を同じ画像に適用したものです。

サンプル

（※Chomeでしか見れません）
filter shadow｜memocarilog demo

サンプルのHTMLとCSSコード

＊＊＊HTML＊＊＊
<div id="example1">
		<img src="1.PNG" width="150" height="122">
</div>
<div id="example2">
		<img src="1.PNG" width="150" height="122">
</div>

＊＊＊CSS＊＊＊
#example1 img{
	-webkit-filter: drop-shadow(3px 0 2px #ff7eec);
}
#example2 img{
	box-shadow: 3px 0 2px #ff7eec;
}

CSS Filter Effectsとは

CSS Filter Effectsというものを知らなかったのですが、少し前にChromeに実装された画像処理ができるブロパティのようです。”filter:” とつくのでMSの独自のfilterの事かと思いましたが違うものです。

CSS Filter Effectsを使うとドロップシャドウの他に、「色相・明度・彩度・グレースケール・セピア・透明度・階調の反転・コントラスト・ぼかし」などの表現もCSS で行えるようです。

drop-shadowの基本的な指定は以下の様にします。

#example{
	-webkit-filter: drop-shadow ( x軸 y軸 シャドウの長さ 色 );
}

画像加工の手間がますます省けて便利です。

元記事のサンプルのコード「box-shadow vs filter: drop-shadow 2 ✿ dabblet.com」には各ブラウザのベンタープレフィックスがついてますが、まだChrome以外のブラウザでは実装されていないようです。はやく他のブラウザでも実装が進んで欲しいですね。