フィルタ
| 関数 | 効果 | 引数 |
|---|---|---|
| blur | ガウシアンぼかし (gaussian blur) を適用 | <length> |
| contrast | コントラストの調整 | <number> または <percentage> |
| brightness | 明るさの調整 | <number> または <percentage> |
| saturate | 彩度 | <number> または <percentage> |
| hue-rotate | 色相を回転 | <angle> |
| invert | カラーサンプル (color sample) を反転 | <number> または <percentage> |
| opacity | 透過率を適用 | <number> または <percentage> |
| grayscale | グレースケール | <number> または <percentage> |
| sepia | セピア (sepia) | <number> または <percentage> |
| drop-shadow | ドロップ シャドウ (drop shadow) 効果を適用 | <color>、<length> |
| コード | 適用後 | 適用前 |
|---|---|---|
filter: blur(2px) |
 |
|
filter: contrast(200%) |
|
|
filter: brightness(200%) |
|
|
filter: saturate(200%) |
|
|
filter: hue-rotate(180deg) |
|
|
filter: invert(100%) |
|
|
filter: opacity(50%) |
|
|
filter: grayscale(100%) |
|
|
filter: sepia(100%) |
|
|
filter: drop-shadow(5px 5px red) |
|
|
複数のフィルタを同時に適用するには、それらを空白区切りで列挙します。
filter: contrast(175%) brightness(3%);
フィルタを適用しないことを明示するには、noneを指定します。
filter: none;
HTMLの情報サイトから、まとめて検索