Jul.27th,2021
＃
CSSのフィルター効果
CSSのフィルター効果は“filter”プロパティや“backdrop-filter”プロパティを使用して設定することができるグラフィカル効果です。
フィルター効果を使用するとCSSだけで画像や要素が描画されるの色合いを変更したり、ぼかし効果やドロップ・シャドウ効果などを適用することができます。
CSSでは適用するフィルター効果を指定することができるフィルター関数が定義されており、これらを使用することで簡単にフィルター効果を適用することができます。
.sample1 {
filter: blur(5px);
}
.sample2 {
filter: sepia(100%);
}
<figure>
<img src="sample.jpg">
<figcaption>
何もしていない写真
</figcaption>
</figure>
<figure>
<img class="sample1" src="sample.jpg">
<figcaption>
ぼかした写真
</figcaption>
</figure>
<figure>
<img class="sample2" src="sample.jpg">
<figcaption>
セピア調にした写真
</figcaption>
</figure>
＃
“<filter-function>”値
“<filter-function>”値は“filter”プロパティや“backdrop-filter”プロパティの値として使用することができるいくつかのフィルター関数で、どのようなフィルター効果を入力画像に適用するかを設定します。
フィルター関数の一覧
| 関数 | 説明 |
|---|---|
| blur() | ガウスぼかしをかける |
| brightness() | 明度を変更する |
| contrast() | コントラストを変更する |
| drop-shadow() | 影をつける |
| grayscale() | グレースケールに変換する |
| hue-rotate() | 色相を変更する |
| invert() | 色を反転させる |
| opacity() | 透明度を変更する |
| saturate() | 彩度を変更する |
| sepia() | セピア調にする |
＃
フィルター効果のサンプル
| フィルター効果なし | ||||
|---|---|---|---|---|
|
| “blur” | “brightness” | “contrast” | “drop-shadow” | “grayscale” |
|---|---|---|---|---|
| 0px |
0% |
0% |
5px 5px 0 |
0% |
| 1px |
10% |
10% |
5px 5px 2px |
10% |
| 2px |
20% |
20% |
5px 5px 4px |
20% |
| 3px |
30% |
30% |
5px 5px 7px |
30% |
| 4px |
40% |
40% |
5px 5px 8px |
40% |
| 5px |
50% |
50% |
5px 5px 10px |
50% |
| 6px |
60% |
60% |
5px 5px 12px |
60% |
| 7px |
70% |
70% |
5px 5px 14px |
70% |
| 8px |
80% |
80% |
5px 5px 16px |
80% |
| 9px |
90% |
90% |
5px 5px 18px |
90% |
| 10px |
100% |
100% |
5px 5px 20px |
100% |
| 15px |
150% |
150% |
||
| 20px |
200% |
200% |
| “hue-rotate” | “invert” | “opacity” | “saturate” | “sepia” |
|---|---|---|---|---|
| 0deg |
0% |
0% |
0% |
0% |
| 30deg |
10% |
10% |
10% |
10% |
| 60deg |
20% |
20% |
20% |
20% |
| 90deg |
30% |
30% |
30% |
30% |
| 120deg |
40% |
40% |
40% |
40% |
| 150deg |
50% |
50% |
50% |
50% |
| 180deg |
60% |
60% |
60% |
60% |
| 210deg |
70% |
70% |
70% |
70% |
| 240deg |
80% |
80% |
80% |
80% |
| 270deg |
90% |
90% |
90% |
90% |
| 300deg |
100% |
100% |
100% |
100% |
| 330deg |
150% |
|||
| 360deg |
200% |
＃
複雑なフィルター効果
SVGフィルター
フィルター関数ではなく“<url>”値を使用することで“<svg>”要素や外部のSVGファイルで定義したSVGフィルターを参照することもできます。SVGフィルターを使用するとフィルター関数で表現できるものよりも複雑なフィルターを適用することもできます。
.sample3 {
filter: url(sample-filter1.svg#sample-svg-filter);
}
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="sample-svg-filter">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<figure>
<img class="sample3" src="sample.jpg">
<figcaption>
SVGフィルターを適用した写真
</figcaption>
</figure>
フィルター効果の重ね掛け
フィルター効果は複数重ね掛けにすることができます。
フィルター効果を複数指定している場合には最初に記述されたフィルター効果が元の入力画像に適用され、2個目以降のフィルター効果はその直前に記述されたフィルター効果の出力結果を入力画像としてフィルター効果を適用するというように1個ずつ記述された順番通りにフィルター効果が適用されます。
.sample4 {
filter: sepia(100%) invert(100%);
}
.sample5 {
filter: invert(100%) sepia(100%);
}
<figure>
<img class="sample4" src="sample.jpg">
<figcaption>
セピア調にしてから色を反転させた写真
</figcaption>
</figure>
<figure>
<img class="sample5" src="sample.jpg">
<figcaption>
色を反転させてからセピア調にした写真
</figcaption>
</figure>
＃
