明度やコントラストの調整、グレースケールやセピア加工など、画像編集ソフトのような働きをする「filter」というcssプロパティがあります。
かなり便利なプロパティですが、残念ながらInternetExplorerには対応していません。（2020.2.22現在）
画像編集と見出しに書きましたが、filterプロパティは画像だけでなくテキストや背景色にも影響します。
親要素にfilterが指定されていると子要素まで影響を受けるので指定範囲には注意しましょう。
IEを無視することが可能であればとても便利なプロパティです。数が多いのでざっくりとご紹介します。
filterプロパティの基本
#hoge{
filter : フィルター名 (フィルターの度合い) ;
}で指定します。
この画像
を元に、実例載せていきます。IEブラウザの方はすみません。
グレースケール grayscale
その名の通りグレースケールです。%か０〜１までの数字で度合いを指定。
0％または0だとグレースケールなし。
100％または1.0で完全グレースケール。
サンプルは0.9(90%)。
#{
filter: grayscale(0.9) ;
}セピア sepia
セピア加工します。指定方法はgrayscaleと同じ。
サンプルは70%(0.7)
#{
filter: sepia(70%) ;
}階調の反転 invert
ネガ・ポジの反転です。本来の色が補色に変わり明るいところは暗く、暗いところが明るくなります。
0 、0%がオリジナル。1.0または100%が完全に反転。50％を指定すると灰色一色です。
サンプルは100%。
#{
filter: invert(100%) ;
}明度 brightness
明度を調整します。指定方法はまたもや同じ。
0 、0%だと真っ黒。1.0、100%が元の明度です。
サンプルは2.0 (200%)
#{
filter: brightness(200%) ;
}彩度 saturate
彩度です。同じくです。
1.0 、100%がオリジナル。0、 0%だと白黒になります。
サンプルは1.2(120%)
#{
filter: saturate(120%) ;
}コントラスト contrast
コントラストです。（以下同文）
サンプルは1.5(150%)。
#{
filter: contrast(1.5) ;
}ぼかし blur
ぼかしをかけます。
ぼかし幅をpx・em・rem・cmなどで指定します。
サンプルは10px。
#{
filter: blur(10px) ;
}色相 hue-rotate
色相を角度の指定で回転させます。
指定方法は0degから359deg。
サンプルは180deg。
#{
filter: hue-rotate(180deg) ;
}影 drop-shadow
影をつけます。
box-shadow やtext-shadowプロパティとほとんど同じですが、指定できるのは
（X方向 Y方向 ぼかしの大きさ 色）だけです。マイナスの値も可能。
サンプルは複数指定しています。
#{
filter: drop-shadow(blue 10px 40px 30px) drop-shadow(#ff0 -10px -10px 30px)
}透明度 opacity
opacityプロパティと一緒です。
サンプルなし。
filterプロパティは複数セットも可能
先ほどdrop-shadowを複数指定したように違う値を複数セットすることも可能です。
サンプルはセピアとぼかしと影を指定。
#{
filter:
sepia(90%)
blur(2px)
drop-shadow(olive 30px 40px 3px);
}
