CSSで画像に効果を加えるfilterの使い方

こんにちは、Ryohei（@ityryohei）です！

CSS3で追加されたfilterは、簡単に画像に効果を加えることができるプロパティです。コントラスト、彩度の調整はもちろん、ぼかしやセピア、グレースケースにも対応していて、一行追加するだけで効果を追加できます。本記事では、マウスオーバーで効果を加えてfilterの内容をご紹介したいと思います！

blur（ぼかし）

blurは画像に対してぼかしの効果を加えることができます。指定した値が大きくなるほど、ぼかし効果が強くなります。

img:hover {
  filter: blur(10px);
}

See the Pen rrxZmw by ryoy (@intotheprogram) on CodePen.

brightness（輝度）

brightnessは、画像の明るさを調整することができます。引数には数値もしくはパーセンテージを指定します。100%未満の値を指定すると暗くなり、100%より大きい値を指定すると明るくなります。画像編集ソフトなどで明るさだけを変更したりすることがありますが、brightnessを使えばその手間が省けますね！

img:hover {
  filter: brightness(200%);
}

See the Pen EpPeEQ by ryoy (@intotheprogram) on CodePen.

contrast（コントラスト）

contrastは、画像のコントラストを調整することができます。引数には数値もしくはパーセンテージを指定します。100%未満の値を指定するとコントラストは下がり、100%より大きい値を指定するとコントラストは上がります。100%を指定した場合は、コントラストは変更されません。明るさ、コントラストはよく変更しますので、この2つがCSSで簡単に調整できるようになるのは嬉しいですね！

img:hover {
  filter: contrast(200%);
}

See the Pen CSS | Filter Contrast by ryoy (@intotheprogram) on CodePen.

drop-shadow（影）

drop-shadowは画像の周囲に影を落とす効果を加えることができます。引数には下記を指定します。

drop-shadow(offset-x offset-y blur-radius spread-radius color)

//offset-x 水平方向の距離（必須）
//offset-y 垂直方向の距離（必須）
//spread-radius 影のぼかし具合（任意）
//color 影の色（任意）

img:hover {
  filter: drop-shadow(10px 10px 10px #555);
}

See the Pen CSS | Filter Drop Shadow by ryoy (@intotheprogram) on CodePen.

grayscale（グレースケール）

grayscaleは画像をグレースケールに変換することができます。引数には数値もしくはパーセンテージを指定します。0%は変換なしで、100%を指定するとグレースケールになります。

img:hover {
  filter: grayscale(100%);
}

See the Pen CSS | Filter Grayscale by ryoy (@intotheprogram) on CodePen.

hue-rotate（色相回転）

hue-rotateは、画像の色相を指定した角度に回転させることができます。引数には角度（deg）を指定します。0degは変更なしとなります。

色相環の詳細については下記をご参照ください。

色相

img:hover {
  filter: hue-rotate(90deg);
}

See the Pen CSS | Filter Hue Rotate by ryoy (@intotheprogram) on CodePen.

invert（反転）

invertは画像の色を反転させることができます。引数には数値もしくはパーセンテージを指定します。0で変更なし、100％で反転します。

img:hover {
  filter: invert(200%);
}

See the Pen CSS | Filter Invert by ryoy (@intotheprogram) on CodePen.

opacity（不透明度）

opacityは画像の不透明度を設定することができます。引数には数値もしくはパーセンテージを指定します。0が透明、100%が不透明の状態となります。

img:hover {
  filter: opacity(75%);
}

See the Pen CSS | Filter Opacity by ryoy (@intotheprogram) on CodePen.

saturate（彩度）

saturateは画像の彩度を変更します。引数には数値もしくはパーセンテージを指定します。0は彩度なし、100%で変更なし、100%より大きい値を指定することで彩度を上げます。

img:hover {
  filter: saturate(200%);
}

See the Pen CSS | Filter Saturate by ryoy (@intotheprogram) on CodePen.

sepia（セピア）

sepiaは画像の色をセピアに変更します。引数には数値もしくはパーセンテージを指定します。0%は変更なし、100%でセピアになります。ちなみにセピアというのは黒茶の色を指します。

img:hover {
  filter: sepia(100%);
}

See the Pen CSS | Filter Sepia by ryoy (@intotheprogram) on CodePen.

CSSのfilterを使用することで、PhotoshopやGIMPといったソフトに頼ることなく簡単に画像に効果を加えることができます。ソフトの使用経験がない方でも、明るさやコントラストの設定も簡単なので、今後も色々な場面で使っていくことになりそうですね！

以上、CSSで画像に効果を加えるfilterの使い方のご紹介でした！