【CSS】CSS filterプロパティによる画像エフェクトを試してみた!

css

先日、FIRE FOXのブラウザのBeta 35が発表されました。

これによりCSS filterが使えるようになるということで今更ながら調べてみました。(笑)

CSS3のfilterとは?

CSS3を使ってPhotoshopのようなフィルター効果を再現する方法がCSSでも使えるようになりました。主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。

filterプロバティの一覧

filterプロバティに指定できるエフェクト関数は以下の11種類となります。

エフェクト関数 処理 値(初期値:太字) 対応ブラウザ
grayscale モノクロ 0?100% webkit
sepia セピア 0?100% webkit
saturate 彩度 0?100?700% webkit
hue-rotate 色相回転 0?360deg webkit
invert 反転 0?100% webkit
opacity 透明度 0?100% webkit
brightness 明るさ 0?100%?300% webkit
contrast コントラスト 0?100%?300% webkit
blur ぼかし 0?10px

webkit
drop-shadow 例: 0 0 2px black webkit
url() カスタム用 詳細 webkit, mozilla

filterプロパティの使用方法

CSSでfilterプロパティを指定する場合は下記のようになります。

とりあえず、他のブラウザでは、まだ使えるか微妙なところもあるのでベンダープレフィックスは現時点ではつけておくのがベターかと!

CSS3のfilterを使ったサンプル

ここでちょっとしたCSS3のフィルターを使ったサンプルを試してみたいと思いますが、全部試すとえらいことになるので少しだけ。

CSS3のフィルターを使えば、わざわざphotoshopで加工する手間や、ロールオーバー時などにアニメーションなどで利用することもできますね。

ブラー(ぼかし)

数値が大きいほどぼかし効果が大きくなります。

グレースケール

数値が大きいほどグレースケールに近づきます。

透明度

数値が低いほうが透明になり100%だと不透明です。ちなみに「50%」でも「0.5」という表記でも大丈夫です。

コントラスト

デフォルトは100%で、0%でコントラストがなくなり、灰色一色になります。100%以上でコントラストが強くなっていきます。

明るさ

デフォルトは1.0で、0.0で真っ暗になります。下記の設定はちょうど薄暗くなります。

下記のサイトがいろいろ弄れて参考になります。

【2013年注目必至!なCSS仕様】CSSフィルタ、これはすごい!(デモ付き)