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

更新日: 2018年05月28日

デザイン

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

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

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

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

blur

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

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

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

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」

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」

grayscale

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

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

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

hue-rotate

filter: hue-rotate( 度数 );

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

6. 反転加工する「invert」

invert

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

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

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

saturate

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

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

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

sepia

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

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

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

opacity

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

CSSフィルターができること　～ちょっとした小技編「３」～

1. フィルターのコンビネーション

先ほどはフィルターの種類を一つひとつ紹介していきましたが、フィルターを複数組み合わせることもできます。

例えば、次に紹介するエフェクトは、ぼんやりとしたヴィンテージ風のエフェクトをかけます。フィルターを複数指定するには、半角スペースを空けるだけで大丈夫です。

.vintage {
　filter: contrast(1.4) saturate(1.8) sepia(.6);
　-webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
}

そうすると、このような形で仕上げることができます。

2. オンマウス(ホバー)したらエフェクトを変える

画像のエフェクトをCSSを使ってかけると、オンマウス(ホバー)したときの画像の見せ方にも工夫を凝らすことができます。
例えば、画像一覧で画像にマウスカーソルを合わせたら、画像の明度が変わる、ということも、次のようなコードで実装することができます。

.grid li img{
　transition: all .2s ease-in-out;
　-webkit-transition: all .2s ease-in-out;
　-moz-transition: all .2s ease-in-out;
　-o-transition: all .2s ease-in-out;
　transform: translateX(0);
　-webkit-transform: translateX(0);
}

.grid li img:hover {
　filter: brightness(50%);
　-webkit-filter: brightness(50%);
}

また、フィルターをリセットしたい場合には、このように指定してあげます。

img:hover{
　filter: none;
　-webkit-filter: none;
}

3. Sassを使った複雑なエフェクトに挑戦

実は、今回紹介したfilterプロパティ以外にも、background-blend-modeプロパティや、mixed-blend-modeプロパティなど、画像にエフェクトをかける様々なフィルターが存在します。

Image Effects with CSSでは、こうした様々なフィルターを、Sassと呼ばれるCSSのメタ言語を使って表現する方法を紹介しています。応用編になりますが、これを使うとPhotoshopも顔負けのエフェクトをコーディングだけで実装することができます。興味がある方は、ぜひトライしてみてください。