×

Photoshopはもはや不要!?CSS3のfilterプロパティを使って画像に色々な効果を加えてみた

2015年10月11日 コーディング

cssフィルター

Web制作において画像にしっかりと効果をつけたいときには、Photoshopなどの画像編集ソフトを使うことが一般的だと思いますが、
わたくし、Photoshop持っておりません。

持っている画像編集ソフトがペイントのみです。自分でもWeb制作に携わるものとしていかがなものかとは思います。

Photoshopをはじめとして、スマホの画像編集機能ややフリーオンライン画像編集サイトを使えば画像に効果をつけられますが、画像編集自体が面倒だなと感じるのが本音です。

ここで使えるのが、CSS3のfilterプロパティです。

今回はfilterプロパティを使用して実際に画像に色々な効果をつけてみました。

CSS3のfilterプロパティとは?

filterプロパティは、画像やテキストに対して様々な視覚効果(色や明るさを変化させたりする)を与えたい場合に使用します。
※もともとはInternet Explorer独自に追加されたプロパティ。

※filterプロパティの対応ブラウザ
http://caniuse.com/#search=filter

上記リンク先でCSS Filter Effectsという項目を見ると、filterプロパティはIEや古いAndroidは未対応のようです。
Firefox、Chrome、Safariなどのモダンブラウザは比較的対応しているようです。

filterプロパティでできること

CSS3のfilterプロパティでは下記にあるような効果を画像につけることができます。
CSSで指定する際は※ベンダープレフィックスが必要となります。

※主要ブラウザのベンダープレフィックス
-moz-:Firefox向け
-webkit-:Google Chrome、Safari向け
-o-:Opera向け
-ms-:Internet Explorer向け

今回は南米にいそうな鳥の画像へfilterプロパティを適用していきます。

南米にいるような鳥

それでは一つずつ効果をつけていきます。

grayscale(グレースケール)

南米にいるような鳥

grayscale(値)
値:0~100%
備考:値が大きいほど、画像の色が白黒に近づく

【CSS】

img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

grayscale(グレースケール)とは、白と黒の2色を使って色の濃淡を表現するという色の表現方法の一種です。

saturate(彩度)

南米にいるような鳥

saturate(値)
値:0~上限なし
備考:値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

【CSS】

img {
     -webkit-filter: saturate(250%);
     -moz-filter: saturate(250%);
     -o-filter: saturate(250%);
     -ms-filter: saturate(250%);
     filter: saturate(250%);
}

saturateでは彩度(色の鮮やかさ)を調節できます。画像の色をもっと目立たせたいという場合に使用します。

sepia(セピア)

南米にいるような鳥

sepia(値)
値:0~100%
備考:値が大きいほど、色が黒褐色に近づく。

【CSS】

img {
     -webkit-filter: sepia(100%);
     -moz-filter: sepia(100%);
     -o-filter: sepia(100%);
     -ms-filter: sepia(100%);
     filter: sepia(100%);
}

sepia(セピア)はイカ墨から作られる黒褐色の絵具を指します。意図的にレトロ感を出したいときなどに、画像をセピア調にしたりします。

hue-rotate(色相)

南米にいるような鳥

hue-rotate(値)
値:0deg~360deg(上限・下限なし)
備考:360deg(1周)で元の色に戻る(-360degでも同じ)

【CSS】

img {
     -webkit-filter: hue-rotate(180deg);
     -moz-filter: hue-rotate(180deg);
     -o-filter: hue-rotate(180deg);
     -ms-filter: hue-rotate(180deg);
     filter: hue-rotate(180deg);
}

hueには色相・色合い・色調の意味が、rotateには回転させるという意味があります。

色相を回転させるってどういうこと?

hue-rotateで値を指定する際にdeg(角度)を使用するのですが色を回転させるとはどういうことなのでしょうか?

色相

上の画像を見てください。これは色相環もしくはカラーホイールといって近い色(厳密には計算している)並べて円環にしたものです。

例えばこの画像のオレンジの色にfilter: hue-rotate(90deg);を適用すると、色相環を反時計回りに90°ずらした色(緑色)になります。

invert(階調の反転)

南米にいるような鳥

invert(値)
値:0~100%
備考:値が大きいほど、写真のネガっぽくなる。

【CSS】

img {
     -webkit-filter: invert(100%);
     -moz-filter: invert(100%);
     -o-filter: invert(100%);
     -ms-filter: invert(100%);
     filter: invert(100%);
}

invertには反転させる、逆にするといった意味があります。階調の反転、いわゆるネガポジ反転ができます。普通の写真を写真のネガみたいに変化させることができます。

階調の反転を行うと、もともとの色が補色(※色相環で正反対にあたる色)に変化して明るいところを暗くして、暗いところを明るくした状態になります。iphoneなどでは視力が弱い人向けにこの階調反転機能が付いています。

blur(ぼかし)

南米にいるような鳥

blur(値)
値:0px~上限なし
備考:値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能。

【CSS】

img {
     -webkit-filter: blur(2px);
     -moz-filter: blur(2px);
     -ms-filter: blur(2px);
     -o-filter: blur(2px);
     filter: blur(2px);
}

blurにはぼんやりさせる、くもらせるといった意味があり、画像をぼかしたい時に使用します。

brightness(明るさ)

南米にいるような鳥

brightness(値)
値:0~上限なし
備考:値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

【CSS】

img {
     -webkit-filter: brightness(0.4);
     -moz-filter: brightness(0.4);
     -o-filter: brightness(0.4);
     -ms-filter: brightness(0.4);
     filter: brightness(0.4);
}

brightnessは明るさを表し、光りの度合いを調整したいときに使える効果です。この記事では写真を暗くしていますが、写真がちょっと暗くて明るくしたいなと思ったときに便利です。

contrast(コントラスト)

南米にいるような鳥

contrast(値)
値:0%~上限なし
備考:値が大きいほど、色がくっきり、はっきりと見える。

【CSS】

img {
     -webkit-filter: contrast(180%);
     -moz-filter: contrast(180%);
     -o-filter: contrast(180%);
     -ms-filter: contrast(180%);
     filter: contrast(180%);
}

contrastには対照・対比の意味があります。最も暗い部分と最も明るい部分の輝度の差を指すようです。
コントラストが大きいと、より対象物をはっきりと目でとらえることができます。

drop-shadow(ドロップシャドウ)

南米にいるような鳥

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)
値1~3:下限上限なし
値4~6:0~255
値7:0~上限なし
備考:値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4~6で色の指定する(色の三原色rgb)
値7で明るさを指定する

【CSS】

img {
     -webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -moz-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -o-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -ms-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

指定した要素に影をつけることが出来ます。box-shadowでも同様のことが可能です。

opacity(不透明度)

南米にいるような鳥

opacity(値)
値:0~1
備考:値が0に近いほど色が透明に近くなる。0.75のように小数での細かい指定が可能。

【CSS】

img {
     -webkit-filter: opacity(0.6);
     -moz-filter: opacity(0.6);
     -o-filter: opacity(0.6);
     -ms-filter: opacity(0.6);
     filter: opacity(0.6);
}

opacityは不透明度という意味で、不透明度を調整することで画像を透けさせることができます。よく見かけるのはマウスオーバーすると画像が透明もしくは透明の画像がはっきりと表示されるといった使い方です。

ちなみに、filterを使わなくてもopacity:0.6;だけでも同様の表示ができます。

まとめ

いかがでしたか?

filterプロパティを使用して画像へ色々な効果をつけることができました。
自分が想像していたよりもしっかりとした効果をつけることができたので、画像加工が面倒な人はぜひfilterプロパティを使用してみてください。

※画像の一部を加工したい、画像の細部にまでこだわりたい場合はPhotoshopなどを使用して画像加工する必要があります。

関連記事