透過pngにもそのままシャドウをかける事ができる filter: drop-shadow

透過pngにもそのままシャドウをかける事ができる filter: drop-shadow

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

下の画像左が透過pngに filter: drop-shadow をかけたものです。右は box-shadow を同じ画像に適用したものです。
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軸 シャドウの長さ 色 );
}
CSS Filter Effectsについて詳しくは下記の記事が参考になりました。
CSS Filter Effects! | Unformed Building
CSS Filter Effectsの使い方 : アシアルブログ

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

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

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能