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%) |
: DATA
: BLOG
: PRAVACY POLICY
タイトルへ
サウンド設定
スクリーン設定