/
フィルターは「画像」「背景」「境界線」「動画(video)」「iframe」などの要素に、ぼかしや色変化などのグラフィック効果を適用します。
同じ画像や要素を少し加工したい場合など、それぞれに作り替えたり、cssで細かく調整しなくても済みますし、使い方次第で手間をかけずに表現の幅が広がります^^
filter プロパティ
| style | 効果 | 単位 | 説明 |
|---|---|---|---|
filter: brightness(100%); | 明度を調整 | % | 明度を下げる < 100%( 元の色) < 明度を上げる |
filter: saturate(100%); | 彩度を調整 | % | 彩度を下げる <100%( 元の色) < 彩度を上げる |
filter: contrast(100%); | コントラストを調整 | % | コントラストを下げる <100%( 元の色) < コントラストを上げる |
filter: hue-rotate(0deg); | 色相の変化 | deg | 0deg - 360deg( 元の色) の間で色相を変化 |
filter: invert(0%); | 階調の反転 | % | 0%( 元の色) - 100%( 反転 ) の間で変化 |
filter: grayscale(0%); | グレースケール | % | 0%( 元の色) - 100%( モノクロ ) の間で変化 |
filter: sepia(0%); | セピア | % | 0%( 元の色) - 100%( セピア ) の間で変化 |
filter: opacity(100%); | 透明度 | % | 0%( 透過 ) - 100%( 元の状態 ) の間で変化css opacity と同じ効果 |
filter: blur(0px); | ぼかし | px | 数値が大きくなるほど、ぼかし量が増える |
filter: drop-shadow(x y ぼかし半径 色); | ドロップシャドウ | pngやsvgなど背景透過画像の場合、画像内オブジェクトのみにドロップシャドウをかけられる |
一括指定 ( 複数のfilterを指定 )
半角スペースで区切って並べます
CSS code
filter: brightness(200%) hue-rotate(30deg) opacity(80%);