CSSの「filter」を使いこなす

f:id:ktrw3200:20180121184427j:plain

あ~!画像を編集してから記事に貼り付けるの面倒くさ-い

それ、CSSでもできるよ

しーえすえす...ですか??

CSSで画像加工

ブログの記事に画像を貼り付けるとき、わざわざ"Photshop"などの画像加工ソフトで彩度や明度、コントラストを調節するという方も少なくは無いと思います。

しかし、CSSのfilterプロパティを利用して、画像加工するという手法もあるのです。今回は、彩度や明度、コントラストを調節することができるfilterプロパティについて詳しく解説します。

"filter"でできること

ぼかし (blur)

See the Pen Filter001 by Puchutech (@puchun) on CodePen.

img {
  filter: blur(5px);
}

ぼかしの場合の値の指定はpxなどで指定しますが、%は使用出来ません。 指定した値は、ガウスぼかしの半径となります。

このフィルターを使用した要素が、ぼかしによって、要素の外側にはみ出てしまうので注意。

モノクロ (grayscale)

See the Pen Filter002 by Puchutech (@puchun) on CodePen.

img {
  filter: grayscale(100%);
}

モノクロのフィルターは0%を基準とし、値が100%に近づくにつれて、要素(画像)がモノクロになります。 値が100%になると、完全に白黒になります。

コントラスト (contrast)

See the Pen Filter003 by Puchutech (@puchun) on CodePen.

img {
  filter: contrast(130%);
}

See the Pen Filter004 by Puchutech (@puchun) on CodePen.

img {
  filter: contrast(70%);
}

コントラストのフィルターは100%を基準とします。

100%が0%に近づくほど、コントラストが低くなり、全体的に灰色がかかり、明暗の差がなくなります。0%になると、完全に灰色だけになります。

逆に100%からさらに大きい値(上限値なし)になると、明暗の差が大きくなり、全体的にくっきりとした画像になります。

明度 (brightness)

See the Pen Filter005 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(130%);
}

See the Pen Filter006 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(70%);
}

明度のフィルターでは、100%を基準とします。

100%から、0%に近づくほど、明度が低くなり、全体が暗くなります。0%になると、要素が真っ黒になります。

逆に100%からさらに大きくなると、明度が高くなり、全体が明るくなります。

彩度 (saturate)

See the Pen Filter009 by Puchutech (@puchun) on CodePen.

img {
  filter: saturate(170%);
}

See the Pen Filter010 by Puchutech (@puchun) on CodePen.

img {
  filter: saturate(50%);
}

彩度のフィルターが100%を基準とします。

100%がさらに大きい値になると、彩度が高くなり、色鮮やかになります。

100%が0%に近づいていくと、彩度は低くなり、0%になると完全に色味がなくなり、モノクロになります。

つまり、sturate(0%)grayscale(100%)と同じフィルターとなります。

階調反転 (invert)

See the Pen Filter007 by Puchutech (@puchun) on CodePen.

img {
  filter: invert(100%);
}

階調反転のフィルターでは100%を基準とし、0%になると、色・輝度が反転されます。「ネガ」とも言われています。 値を50%にすると、灰色になります。

色調回転 (hue-rotate)

See the Pen Filter008 by Puchutech (@puchun) on CodePen.

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

色相回転の場合の値の指定はdegを使用します。degは色相環の角度(=degree)を意味します。

色相環
色相環
つまり、180degなら色が反転し、360degなら元の色と同じになるということです。

セピア (sepia)

See the Pen Filter011 by Puchutech (@puchun) on CodePen.

img {
  filter: sepia(100%);
}

セピアとは、茶色っぽい色調を意味します。 セピアのフィルターでは0%を基準とし、100%に近づくほど、茶色がかかったセピア調になります。

セピアにすることで、レトロな雰囲気を出すことができまね。

影 (drop-shadow)

See the Pen Filter012 by Puchutech (@puchun) on CodePen.

img {
  filter: drop-shadow(5px 5px 10px #1A237E);
}

影のフィルターには4つの値を入力する必要があります。

1つ目には、x軸方向(水平方向)影の位置

2つ目には、y軸方向(垂直方向)影の位置

3つ目には、影の広がりの大きさ

4つ目には、影の色を入力します。

なお、4つ目の影の色の初期値はblack(=#000)となっており、何も入力しない場合、初期値が適用されます。

透過 (opacity)

See the Pen Filter014 by Puchutech (@puchun) on CodePen.

img {
  filter: opacity(70%);
}

透過のフィルターは100%を基準とし、0%に近づくほど、要素が透明になっていきます。

0%になると、要素は完全に透明になり、見えなくなります。

このフィルターはCSS3で追加されているopacityプロパティで代用かのうで。 filter: opacity(70%)opacity: 70%と同じ意味です。

フィルターを複数利用する

See the Pen Filter013 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(80%)saturate(170%);
}

フィルターを複数利用する場合は、適用したいフィルターを続けて入力するだけです。サンプルでは明度とコントラストのフィルターを適用させています。

各ブラウザの対応状況

  • 13.0
  • 53.0
  • 35.0
  • 40.0
  • 9.1

あとがき

CSSのfilterだけでも、かなり表現の幅が広がるのではないでしょうか。簡単なので是非使ってみてください。

サンプルに使用した写真 : Ludovic Fremondiere on Unsplash
参考 : https://developer.mozilla.org/ja/docs/Web/CSS/filter