CSSの「filter」を使いこなす
あ~!画像を編集してから記事に貼り付けるの面倒くさ-い
それ、CSSでもできるよ
しーえすえす...ですか??
CSSで画像加工
ブログの記事に画像を貼り付けるとき、わざわざ"Photshop"などの画像加工ソフトで彩度や明度、コントラストを調節するという方も少なくは無いと思います。
しかし、CSSのfilter
プロパティを利用して、画像加工するという手法もあるのです。今回は、彩度や明度、コントラストを調節することができるfilterプロパティについて詳しく解説します。
"filter"でできること
- ぼかし(
blur
) - モノクロ(
grayscale
) - コントラスト(
contrast
) - 明度(
brightness
) - 彩度(
saturate
) - 階調反転(
invert
) - 色相回転(
hue-rotate
) - セピア(
sepia
) 要素をセピア調にします。 - 影(
drop-shadow
) 要素に影をつけます。 - 透過(
opacity
) 要素の透過率を調節します
ぼかし (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