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

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

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

CSS3のfilterとは？

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

filterプロバティの一覧

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

filterプロパティの使用方法

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

	-webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(5px);

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

CSS3のfilterを使ったサンプル

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

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

ブラー（ぼかし）

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

	.blur:hover{
     -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(5px);
    
}

グレースケール

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

	.grayscale:hover{
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

透明度

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

	.opacity:hover{
     -webkit-filter: opacity(20%);
     -moz-filter: opacity(20%);
     -o-filter: opacity(20%);
     -ms-filter: opacity(20%);
     filter: opacity(20%);
}

コントラスト

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

	.contrast:hover{
     -webkit-filter: contrast(150%);
     -moz-filter: contrast(150%);
     -o-filter: contrast(150%);
     -ms-filter: contrast(150%);
     filter: contrast(150%);
}

明るさ

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

.brightness:hover{
     -webkit-filter: brightness(0.5);
     -moz-filter: brightness(0.5);
     -o-filter: brightness(0.5);
     -ms-filter: brightness(0.5);
     filter: brightness(0.5);
}

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