Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。
Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。

今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。
とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。

CSSフィルターができること　～基本機能「９」～

1. レンズで覗き込むようにぼかしを加える「blur」

filter: blur( ぼかしの長さ );

blurを指定すると、ガウシアンぼかしタイプのブラー効果を加えることができます。*「ぼかしの長さ」*とは、どれくらいのピクセル数を背景とブレンドするかという距離のことです。「ぼかしの長さ」が0であればフィルターをかけないのと同じで、長くなればなるほどぼかされていきます。

2. 明るさを調節する「brightness」

filter: brightness( 数字 or パーセンテージ );

brightnessを指定することで、画像を明るくしたり暗くしたりすることができます。値が1(もしくは100％)の場合がフィルターをかけないのと同じで、0％に近くほど暗くなります。また、100％を超えて指定すると明るくなります。

暗くする場合は、このような場合です。

.darken {
　　filter: brightness(0.5);
　　-webkit-filter: brightness(0.5);
}

逆に明るくしたい場合には、このように指定します。

.lighten {
　　filter: brightness(120%);
　　-webkit-filter: brightness(120%);
}

3. 明暗の差を調節する「contrast」

filter: contrast( 数字 or パーセンテージ );

画像にコントラストをかけたい時には、contrastを指定してください。同じく1(あるいは100％)が元の画像と同じで、0％に近くほどグレーになります。

コントラストを強めたい場合には、このように指定します。

.contrast {
　filter: contrast(2);
　-webkit-filter: contrast(2);
}

逆に弱めたい場合には1よりも小さな値を指定します。

.contrast {
　filter: contrast(50%);
　-webkit-filter: contrast(50%);
}

4. 白黒写真も簡単加工「grayscale」

filter: grayscale( 数字 or パーセンテージ );

続いて、写真をグレースケール表示させることができるgrayscaleを紹介します。grayscaleは画像の色を取り除き、白黒表示することができます。カッコの中の値はグレースケール化の割合で、0では変化が起きず、1(あるいは100％)になると完全にグレースケール表示されます。

5. 色温度を変える「hue-rotate」

filter: hue-rotate( 度数 );

hue-rotateを使うと、色温度を変更することができます。Photoshopでいう「色相・彩度調整」に似たフィルターをかけることができます。rotateとなっているのは、色相環をイメージした時に、0〜360度まで回すように値を指定するからです。

6. 反転加工する「invert」

filter: invert( 数字 or パーセンテージ );

invertフィルターを使うと、現像前のフィルムのような反転表示をさせることができます。黒は白に、オレンジは青色になるといった具合に変わります。カッコの中はフィルターの強さを表し、0ではフィルターはかかっておらず、1(あるいは100％)に近づくほど反転度が強くなります。

7. 鮮やかさを調整する「saturate」

filter: saturate( 数字 or パーセンテージ );

saturateは彩度を変更するためのフィルターです。カッコの中身は、これまでのものと同様に、0では変化が起きず、1(あるいは100％)に近づくほど色が鮮やかになります。逆に色のトーンを落としたい場合には、grayscaleを使いましょう。

8. どこか懐かしいセピア調に変換「sepia」

filter: sepia( 数字 or パーセンテージ );

sepiaを指定すると、時間の経った色あせた写真のようなセピア調のエフェクトをかけることができます。1(あるいは100％)に近づくほど完全なセピアに近付きます。

9. 透き通るガラスのように加工「opacity」

現在、画像以外でも最も多く使われているエフェクトが、このopacityフィルターでしょう。opacityでは、透明度を指定することができます。数字に関しては、1(あるいは100％)では全く変化が起きませんが、0に近づくほど透明になり、0で完全に見えなくなります。このフィルターは一般的に使われているopacityプロパティと同じ働きをしますが、こちらのフィルターで指定したほうがパフォーマンスがよいブラウザもあります。