CSS3でフィルター効果をつける

フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。
CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの一手間を省けるかもしれません。

filterプロパティについて

CSSでフィルター効果をつけるには、filterプロパティを使います。filterプロパティはblur()などの関数を値に指定することで様々なフィルター効果をつけることができます。

CSS filterのサンプル

通常の花のサンプル写真

brightness

filter:brightness(120%)

要素の明るさを変えます。
単位　％

contrast

filter:contrast(120%)

コントラストを変更します。
単位　％

grayscale

filter:grayscale(70%)

グレースケールに変更します。
単位　％

saturate

filter:saturate(40%)

彩度を変更します。
単位　％

sepia

filter:sepia(70%)

セピア調に変更します。
単位　％

hue-rotate

filter:hue-rotate(120deg)

色相を変更します。設定は色相環になっています。
単位　deg（角度）

invert

filter:invert(80%)

色の反転を行います。
単位　％

opacity

filter:opacity(50%)

不透明度を変更します。
単位　％

drop-shadow

filter:drop-shadow(5px 5px 5px #333)

ドロップシャドウをつけます。
x座標,y座標,ぼかしの半径,影の色を指定します

blur()

filter:blur(3px)

ガウスぼかし効果を適用します。
単位はpx

参考