元画像はそのままで表示するの際にかけるフィルタ。さすがにPHOTOSHOPはいりませんとはならないがそこそこ調整できてしまう。ホバー時とかで画像を少し変化をつける時に使えそうなfilter。いろんなfilter効果を確認すべし。元画像はこれ。

brightness/明度

明るさの調整。元の明るさは100％。300％で設定。

filter: brightness(300%);

contrast/コントラスト

コントラスト調整。元のコントラストは100％。300％で設定。

filter: contrast(200%);

saturate/彩度

彩度の調整。色の鮮やかさだな。元の彩度は100％。200％で設定。

filter: saturate(200%);

grayscale/グレースケール

モノクロにしたい場合に。100％で完全なモノクロになるが90％で設定。いい感じ。

filter: grayscale(90%);

sepia/セピア

モノクロよりも茶系のセピア。100％で完全なセピア色に。90％で設定。

filter: sepia(90%);

blur/ぼかし

よくマウスオンする前の画像とかであるな。ピクセルで設定。これは5px。画像をダウンロードすれば元画像になるので注意せよ。

filter: blur(5px);

hue-rotate/色相変換効果

色相変換効果を付ける。360度で元画像と同じになるので正反対なら180度。単位はdegとなる。

filter: hue-rotate(180deg);

invert/色相・明度・彩度を反転

色相・明度・彩度を反転させる。0は無効で100％で完全に反転される。50％だとまっさらなグレーになる。

filter: invert(100%);

opacity/透明度

透明にする。100％で元画像。数値が小さいほど透明度が高くなる。

filter: opacity(30%);

drop-shadow/影

これはどちらかというと文字に使うかな？あとSVGとか。

drop-shadow(　X軸方向のオフセット　Y軸方向のオフセット　シャドウの距離　シャドウの色）

filter: drop-shadow(5px 3px 5px rgba(0,0,0,0.9));