Web用の画像を加工する際にPhotoshopを使っている方も多くいらっしゃいますが、簡単な画像加工なら、CSSのfilterプロパティ(CSS Filter)を使うのがオススメです。

CSSフィルターを使えば、Photoshopでもおなじみの彩度、明るさ、ぼかしといった様々な画像加工が手軽にできます。しかも、数行のコードを書くだけで、動画にも使えるので便利です。

今回は、codepenに公開されているCSSフィルターのサンプルをまとめてご紹介します。
今すぐ活用できるものばかりですので、ぜひこれからの作業に取り入れてみてください。

画像加工が手軽にできるCSSフィルターサンプル

1.Grayscale Filter

Grayscale Filter
http://codepen.io/grayghostvisuals/pen/cgFGm

モノクロ加工として画像編集ではおなじみのグレースケール(Grayscale)も、CSSフィルターで手軽に行うことができます。

適用すると、初期値0%から100%に近づくごとに画像が暗くなり、100%にすると画像の表示が完全なグレーになります。このとき、負の値は使用できません。

サンプルのケースではgrayscale(1)となっており、100%を指定しています。例えば50%にしたい場合は、grayscale(50%)やgrayscale(0.5)と入力します。

2.Blur Filter

Blur Filter
http://codepen.io/grayghostvisuals/pen/Ivpto

画像をぼかしたい時には、blur(ぼかし)フィルターを使います。フィルタを適用したい割合をpx(ピクセル)で指定することでぼかしをかけることができます。
0px(初期値)がオリジナル画像で、最大が10pxです。

10pxに近づくごとにぼかしの適用割合が大きくなります。サンプルの場合、ぼかしはblur(5px)となっていますので、最大の半分程度ぼかしがかかっている状態です。

3.Sepia Filter

Sepia Filter
http://codepen.io/grayghostvisuals/pen/qezkI

セピア(Sepia)フィルターを使うと、まるで古びた写真のような色合いにしてくれます。ヴィンテージ感を出したいときに便利なフィルターです。

フィルターのかかり具合は指定した値のパーセンテージで決まります。
0%なら元画像のまま、100%に近づくにつれてセピア色に出力します。

サンプルでは100%を指定しており、画像を綺麗なセピア色に変換しています。
20%、50%に指定してわずかにセピア色にすることも可能です。

4.Material Drop Shadows

Material Drop Shadows
http://codepen.io/protomorph/pen/VejmVE

画像加工でよく取り入れることのあるドロップシャドウ(drop-shadow)も、CSSフィルターだけで実現することができます。
使用頻度の高いフィルターですので、覚えておいて損はありません。

フィルターを適用する際には、括弧の中に長さの値、任意で色を指定します。
効果と使い方は、CSS3のbox-shadowプロパティと似ています。ただし、指定できるのは水平、垂直方向の移動距離・サイズ・色のみとなっています。

5.CSS Filter - Hue-Rotate

CSS Filter - Hue-Rotate
http://codepen.io/designerJordan/pen/qDEjr

hue-rotate(色相回転)は色相を変更するときに使う関数です。
色相環(カラーホイール)を回転する角度を0(初期値) 〜 360[deg] の間で指定することで、オリジナル画像の色相を変更できます。

360deg、-360degを指定するとちょうど1周し、元の色と同じになります。サンプルコードではスライダーで角度が変更できるようになっていますので、実際に動かしてみたり、色相環を見てみると理解がしやすくなります。

6.CSS Filter - Brightness

CSS Filter - Brightness
http://codepen.io/designerJordan/pen/oEsAd

画像加工の定番である明るさ調整も、CSSフィルターのBrightness(明るさ)でできます。
Photoshopなどでも簡単にできる加工ですが、CSSフィルターを使えばソフトを開く手間が省けて便利です。

適用する際には、グレースケールと同様にパーセンテージで適用割合を指定します。
Brightnessフィルターでは100%がオリジナル画像の状態となり、負の値になるほど画像が暗く、正の値になるほど画像が明るくなります。

サンプルではスライダーを動かすことで画像の変化を見ることができますので、ぜひ試してみてください。

7.CSS Filter - Saturate

CSS Filter - Saturate
http://codepen.io/designerJordan/pen/yBxIe

画像の表示彩度(色の鮮やかさ)を変更したいときには、Saturate(彩度)フィルターを使います。
オリジナル画像の彩度を100%として、彩度をどのくらいの割合変更するのかを指定します。

値が100%より小さくなるほど彩度が低く、大きくなるほど彩度が高くなります。
実際にサンプルのスライダーを動かし0%にするとモノクロカラーに、999%まで上げるとビビッドな色合いに変化しました。

8.CSS Filter - Invert

CSS Filter - Invert
http://codepen.io/designerJordan/pen/FeimD

Invert(階調反転)は、ネガ・ポジ反転ができるフィルターです。
階調を反転すると本来の色が補色に変わり、明るい部分が暗く、暗い部分が明るくなった状態になります。

初期値0%〜100%まで指定することができ、値が大きくなるほどネガっぽい画像に変化します。

9.CSS Filter - Opacity

CSS Filter - Opacity
http://codepen.io/designerJordan/pen/BazeF

画像を透過したいときには、Opacity関数を使います。0%〜100%の間で任意のパーセンテージを指定することで、画像の透過度を決めることができます。

100%がオリジナル画像の状態で、0%に近づくほど画像が透過していきます。
サンプルコードではパーセンテージを下げるほどに段々透過し、画像上に文字が浮かび上がっていくのが分かります。

10.CSS Filter - Contrast

CSS Filter - Contrast
http://codepen.io/designerJordan/pen/hBuFn

contrast(コントラスト)は、画像表示のコントラストを変更したい時に使えるフィルターです。画像内の明るい箇所、暗い箇所の調整をCSSだけで実現します。

先にご紹介したBrightness同様、コントラストを上げるだけでなく下げることも可能です。
初期値の100%を下回ればコントラストが下がり、上回ればコントラストが上がります。

100%に設定するとオリジナル画像を表示し、0%まで下げると画像は完全なグレー色になります。

11.Filter Animation

Filter Animation
http://codepen.io/SitePoint/pen/KrXybm

CSSフィルターは複数を組み合わせて、様々な効果を再現することができます。
複数の関数を使用するときには、「filter:」に続けて適用したい順に関数を記載します。

基本的にはフィルターの順番に決まりはありませんが、場合よっては書いた順番で問題が出てくることもありますので気掛けておく必要があります。例えば、Grayscale→Sepiaの順に使用すると画像はセピアに変化しますが、逆の順序の場合にはグレースケールに変化します。

この他、CSSフィルターを使ってアニメーションを表現することも可能です。
工夫次第で色々な表現できますので、サンプルコードを参考にしてみてください。

12.CSS Filter Example — SVG

css12.png
http://codepen.io/SitePoint/pen/kXGxQx

CSSには様々なフィルターが揃っていますが、場合によっては使いたいものがないこともあります。
自分が使いたいフィルターがない場合には、オリジナルを作ることが可能です。

SVGで作ったCSSフィルターをurl()フィルターで実行することができます。
サンプルでは、オリジナル画像と比較して上の画像が緑っぽく、下の画像が青っぽく変化しているのが分かります。

まとめ

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

以上、Photoshopいらずで加工ができるCSSフィルターのサンプルをご紹介しました。
CSSフィルターはとにかくパワフルな効果を持ちながら、簡単に使えるのが特徴です。

単独でも複数の効果を組み合わせても使えますので、本当にソフトで編集するような感覚で加工ができます。

しかも、画像修正ソフトとは違って値を指定するだけですので、一度加工したものの再編集も簡単です。
日常的に使う画像加工の多くが揃っていますので、ぜひサンプルを参考にしながら使ってみてはいかがでしょうか。