CSSフィルタ (Filters) を使った9つの表現

CSSフィルタは画像・文字・罫線等の要素に対してグラフィック効果を適用します。
複数のフィルタを使用するには、各フィルタをスペースで区切ります。
JavaScriptの場合は「element.style.filter ＝ ‘blur(2px) brightness(1)’」とします。

・filter:blur();
画像にガウスぼかしを適用します。
パーセンテージ値は受け入れません。

filter:blur(0px)	filter:blur(2px)	filter:blur(4px)

・filter:brightness();
画像の明るさを調整します。
0％を指定すると、完全に黒い画像が作成されます。
100％でオリジナルの画像を表示できます。
100％以上の値を指定すると、画像を明るくできます。

filter:brightness(0％)	filter:brightness(100％)	filter:brightness(150％)

・filter:contrast();
画像のコントラストを調整します。
0％を指定すると、完全に灰色の画像が作成されます。
100％でオリジナルの画像を表示できます。
100％以上の値を指定すると、画像のコントラストが大きくなります。

filter:contrast(0％)	filter:contrast(100％)	filter:contrast(150％)

・filter:drop-shadow([offset-x] [offset-y] [blur-radius] [spread-radius] [color]);
画像にドロップシャドウ効果をかけます。
box-shadowプロパティとは異なり、アルファチャネルに適応した影を作成します。

filter:drop-shadow(2px 2px 2px #333)	filter:drop-shadow(4px 4px 4px #333)	filter:drop-shadow(6px 6px 6px #333)

・filter:grayscale();
画像をグレースケールに変換します。
0％でオリジナルの画像を表示できます。
100％を指定すると完全にグレースケールになります。

filter:grayscale(0％)	filter:grayscale(50％)	filter:grayscale(100％)

・filter:hue-rotate();
画像に色相回転を適用します。
値はangleを使い、0degまたは360degでオリジナルの画像を表示できます。

filter:hue-rotate(0deg)	filter:hue-rotate(90deg)	filter:hue-rotate(180deg)

・filter:invert();
画像の色を反転します。値の適用は0％または100％のみとなります。
0％でオリジナルの画像を表示できます。
100％を指定すると色が反転されます。

filter:invert(0％)	filter:invert(50％)	filter:invert(100％)

・filter:saturate();
画像の色の彩度を調整します。
0％を指定すると無彩色になります。
100％でオリジナルの画像を表示できます。

filter:saturate(0％)	filter:saturate(50％)	filter:saturate(100％)

・filter:sepia();
画像をセピアに変換します。
0％でオリジナルの画像を表示できます。
100％を指定すると完全にセピアになります。

filter:sepia(0％)	filter:sepia(50％)	filter:sepia(100％)