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

HTML&CSS

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

スポンサーリンク

filterプロパティについて

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

CSS filterのサンプル

E{
filter:function();
}

通常の花のサンプル写真

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

参考

タイトルとURLをコピーしました