CSSで画像を補正するfilterプロパティ
filterプロパティは要素の明度や彩度の調整、ぼかしやグレースケール化、セピアカラー化。ドロップシャドウまで簡単なコードでの調整ができます。
半角スペース区切りで重ねがけもできるので様々な表現が可能になります
hoverとの組み合わせも面白いと思います
大体のケースは画像に対して行うかと思うのでこの記事では画像に対して実行していきます
動画化もしていますのでよろしければこちらもご覧ください
明度を変える
明るさを変えたい場合は「brightness」フィルターを使って調整します。パラメータは0％以上の値が使える。
値を0％にすると、真っ黒。
100％で元々の明るさの画像を表示。
100％以上の値を指定すると、画像をさらに明るくできる。
|
1 2 3 4 5 |
img { filter: brightness(0%);/*真っ黒*/ filter: brightness(100%);/*元々明るさ*/ filter: brightness(300%);/*3倍明るくなる*/ } |
コントラストを変える
コントラストを変えたい場合は「contrast」フィルターを使って調整します。
明度と同じように、0以上の値が使えます。
値を0％にするとグレー1色に。
値を100％に設定すると元々のコントラスト。
100％よりも値を大きくするとどんどん画像のコントラストが大きくなります。
明るい部分と暗い部分の差を調整できるので細かい調整で便利かな
|
1 2 3 4 5 |
img { filter: contrast(0%);/*真っ黒*/ filter: contrast(100%);/*元々明るさ*/ filter:contrast(300%);/*明暗の差がすごくなる*/ } |
彩度を変えてみたい
彩度を変えたい場合は「saturate」フィルターを使って調整します。
値を0％にすると画像の色彩がなくなり無彩色に
100％で元々の彩度
100％を超える値を指定すると鮮やかになります。
※ 負の値は使えません
|
1 2 3 4 5 |
img { filter: saturate(0%);/*無彩色*/ filter: saturate(100%);/*元々の彩度*/ filter: saturate(150%);/*鮮やかに*/ } |
グレースケールに変える
グレースケールに変えたい場合は「grayscale」フィルターを使うと、画像をグレースケールにできます。
このフィルターは画像を少しずつグレーに近づけるので
値が0％だと画像は変化なし
100％にすると完全にグレーになります
※ 負の値は使えません。
|
1 2 3 4 5 |
img { filter: grayscale(0%);/*変化なし*/ filter: grayscale(50%);/*少しグレー*/ filter: grayscale(100%);/*完全にグレー*/ } |
セピアカラーにする
セピアカラーに変えたい場合は「sepia」フィルターを使って調整します。
セピアの度合いは、
0％で元画像のまま
100％で完全にセピアになります。
※ 考え方はグレースケールと同じ
透明部分がなぜか黄ばみます
|
1 2 3 4 5 |
img { filter: sepia(0%);/*変化なし*/ filter: sepia(50%);/*少しセピアカラー*/ filter: sepia(100%);/*完全にセピアカラー*/ } |
色相回転
「hue-rotate」フィルターを使うと画像内のすべての色の色相が回転します。
色を回転させる角度は指定するパラメータの値で決まり、
0degは回転しないので画像は変化しませんし、360degで回転が一周し元の位置に戻るのでこちらも変化なしになります。
360degより大きい値の効果は一周目と重なります。90degと450degは同じ効果になります。
|
1 2 3 4 5 |
img { filter: hue-rotate(0deg);/*変化なし*/ filter: hue-rotate(180deg);/*すべての色が反転*/ filter: hue-rotate(360deg);/*変化なし*/ } |
階調反転
「invert」フィルターを使うと画像内のすべての色の階調を反転します。
反転の度合いは、
0％で元画像のまま
100％で完全に反転します
|
1 2 3 4 |
img { filter: invert(0%);/*変化なし*/ filter: invert(100%);/*完全に反転*/ } |
ぼかし
「blur」フィルターを使うと画像にぼかしをかけて色をにじませて境界の外側に広げることができます。
半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を指定します。
値が大きくなるほど、ぼかしの度合いが強くなります
※ ％での指定はできません。
|
1 2 3 4 |
img { filter: blur(1px);/*少しぼかす*/ filter: blur(5px);/*かなりぼかす*/ } |
ドロップシャドウ
「dropshadow」フィルターは、文字通り画像や文字にドロップシャドウ効果をかけます。
SVGなんかにやってみると面白いかも
このプロパティでは、x軸オフセット、y軸オフセット、ぼかし半径、色の指定が必要となります。
|
1 2 3 |
img { filter: drop-shadow(5px 5px 10px #666); } |
drop-shadow(0px 0px 2px #f66);
文字に対してフィルターのテスト
透明度は割愛
