【PhotoshopなしでOK！】CSSでできるシンプルな画像加工9選

CSSの画像フィルターを使えば、Photoshopを起動することなく画像に手を加えることができます。サイトのビジュアルを統一したり、ホバー時の効果を加えたりと用途は様々です。

今回はシンプルな基本フィルターを9種類紹介します。

 

 

フィルターの使い方

CSSのfilterプロパティを使うことで、画像をぼかしたり色を反転させたりといったフィルターを適用することができ、最近のブラウザであればほぼ全てで対応が済んでいます。とても簡単な文法で使用することができますよ。

 

 

 

使えるフィルターのリスト

それでは一体どんなフィルターが使えるのか見ていきましょう。

・ブラー（ぼかし）

 

このフィルターはガウシアンぼかしを適用します。lengthの値はいくつのピクセルをブレンドするのかを決定し、大きな値にするほどぼやけるようになります。0ではフィルターなしと同じ状態です。

 

 

 

・明るさ

 

このフィルターで画像を明るくしたり暗くしたりできます。値は明るさの割合を示し、パーセンテージまたは小数で入力します。0％もしくは0で真っ黒になり、100％もしくは1で元の画像と同じ明るさになります。

 

画像を暗くするには次のようにしてください。

 

 

次のようにすれば明るくすることもできます。

 

 

・コントラスト

 

画像のコントラストを強めたり弱めたりします。値の指定方法は明るさの場合と同じです。コントラストを強くするには次のようにしてください。

 

 

弱めることもできます。

 

 

 

・グレイスケール

 

最もよく使われるフィルターで、画像の色をなくし白黒に近づけます。値に100％もしくは1を指定すると完全にグレイスケールの画像になります。

 

 

 

・色相の操作

 

Photoshopでの色相補正と同じように動作します。画像の上に透明なカラーホイールがあると想像してください。angleでホイールの角度を決定します。最大値は360です。

 

 

・色の反転

 

画像の色を反転させます。黒は白に、オレンジは青になります。値を変えることで強度の調節ができます。

 

 

 

・彩度

 

画像の彩度を強くします。値が高いほど彩度も高くなります。逆に画像のトーンを落としたい時にはgrayscaleを使ってください。

 

 

 

・セピア

 

画像をセピア調にします。値の指定方法はこれまでと同じです。

 

 

 

・透明度

知っていると背景と画像をブレンドさせる時などに使える便利なフィルターで、画像の透明度を操作します。値は透明度を決定し、100%もしくは1がオリジナルの状態で、値が小さくなるにつれて透明度が高まります。

 

 

 

このように、CSSを使うことでブラウザ内で画像を加工することができます。簡単な加工であればPhotoshopなしで対応することができるでしょう。ぜひ使いこなしてくださいね。

 

 

 

※本記事は、9 Simple CSS Image Filtersを翻訳・再構成したものです。