透過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プラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS