Weblasts

CSSで画像を補正する

filterプロパティ

filterプロパティは要素の明度や彩度の調整、ぼかしやグレースケール化、セピアカラー化。ドロップシャドウまで簡単なコードで画像の調整ができます。
半角スペース区切りで重ねがけもできるので様々な表現が可能になります
hoverとの組み合わせも面白いと思います

明度を変える

明るさを変えたい場合は「brightness」フィルターを使って調整します。パラメータは0%以上の値が使える。 値を0%にすると、真っ黒。
100%で元々の明るさの画像を表示。
100%以上の値を指定すると、画像をさらに明るくできる。

CSS

img {
  filter: brightness(0%);/*真っ黒*/
  filter: brightness(100%);/*元々明るさ*/
  filter: brightness(3000%);/*3倍明るくなる*/
}
実装SAMPLE

30%
100%
300%

コントラストを変える

コントラストを変えたい場合は「contrast」フィルターを使って調整します。
明度と同じように、0以上の値が使えます。
値を0%にするとグレー1色に。
値を100%に設定すると元々のコントラスト。
100%よりも値を大きくするとどんどん画像のコントラストが大きくなります。
明るい部分と暗い部分の差を調整できるので細かい調整で便利かな

CSS

img {
  filter: contrast(0%);/*真っ黒*/
  filter: contrast(100%);/*元々明るさ*/
  filter:contrast(300%);/*明暗の差がすごくなる*/
}
実装SAMPLE

30%
100%

彩度を変えてみたい

彩度を変えたい場合は「saturate」フィルターを使って調整します。
値を0%にすると画像の色彩がなくなり無彩色に
100%で元々の彩度
100%を超える値を指定すると鮮やかになります。
※ 負の値は使えません

CSS

img {
  filter: saturate(0%);/*無彩色*/
  filter: saturate(100%);/*元々の彩度*/
  filter: saturate(150%);/*鮮やかに*/
}
実装SAMPLE

0%で無彩色
100%
150%で鮮やかに

グレースケールに変える

グレースケールに変えたい場合は「grayscale」フィルターを使うと、画像をグレースケールにできます。
このフィルターは画像を少しずつグレーに近づけるので
値が0%だと画像は変化なし
100%にすると完全にグレーになります
※ 負の値は使えません。

CSS

img {
  filter: grayscale(0%);/*変化なし*/
  filter: grayscale(50%);/*少しグレー*/
  filter: grayscale(100%);/*完全にグレー*/
}
実装SAMPLE

0%
50%
100%

セピアカラーにする

セピアカラーに変えたい場合は「sepia」フィルターを使って調整します。
セピアの度合いは、
0%で元画像のまま
100%で完全にセピアになります。
※ 考え方はグレースケールと同じ
透明部分がなぜか黄ばみます

CSS

img {
  filter: sepia(0%);/*変化なし*/
  filter: sepia(50%);/*少しセピアカラー*/
  filter: sepia(100%);/*完全にセピアカラー*/
}
実装SAMPLE


0%
50%
100%

色相回転

「hue-rotate」フィルターを使うと画像内のすべての色の色相が回転します。
色を回転させる角度は指定するパラメータの値で決まり、
0degは回転しないので画像は変化しませんし、360degで回転が一周し元の位置に戻るのでこちらも変化なしになります。
360degより大きい値の効果は一周目と重なります。90degと450degは同じ効果になります。

CSS

img {
  filter: hue-rotate(0deg);/*変化なし*/
  filter: hue-rotate(180deg);/*すべての色が反転*/
  filter: hue-rotate(360deg);/*変化なし*/
}
実装SAMPLE


0deg
180deg
360deg

階調反転

「invert」フィルターを使うと画像内のすべての色の階調を反転します。
反転の度合いは、
0%で元画像のまま
100%で完全に反転します

CSS

img {
  filter: invert(0%);/*変化なし*/
  filter: invert(100%);/*完全に反転*/
}
実装SAMPLE


0%
100%

ぼかし

「blur」フィルターを使うと画像にぼかしをかけて色をにじませて境界の外側に広げることができます。
半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を指定します。
値が大きくなるほど、ぼかしの度合いが強くなります
※ %での指定はできません。

CSS

img {
  filter: blur(1px);/*少しぼかす*/
  filter: blur(5px);/*かなりぼかす*/
}
実装SAMPLE

1px
5px

ドロップシャドウ

「dropshadow」フィルターは、文字通り画像や文字にドロップシャドウ効果をかけます。
SVGなんかにやってみると面白いかも
このプロパティでは、x軸オフセット、y軸オフセット、ぼかし半径、色の指定が必要となります。

CSS

img {
  filter: drop-shadow(5px 5px 10px #666);
}
実装SAMPLE


上記の値


文字に対して
drop-shadow(0px 0px 2px #f66);

Web制作のアレコレ

透明度は割愛

Recommend Post