Photoshopいらず! CSS3だけで写真にフィルター加工をかけちゃうチュートリアル

写真の明るさを変えたり、ぼかしをかけたり、色相を変えたり。

こうしたことはPhotoshopなどのソフトを使うことがほとんどではないかと思いますが、ある程度のことが実はCSS3だけでも実現できたりします。
今回はそのチュートリアルをまとめてみました。

[関連] 「Googleカスタム検索」のデザインをCSSレベルで変更するテクニック 
[関連] 「CSS3デザインプロフェッショナルガイド」はデザイナー必携本だ 
[関連] CSS3で作られたレイヤースタイル風CSS3ジェネレーター 
[関連] CSS3に対応していないブラウザで閲覧したら? をかんたんに確認できる「deCSS3」 

基本となるのはfilterプロパティです。記述としては以下が基本形になります。

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

実際に写真をCSS3だけでフィルター加工してみる

というわけで早速実践。今回は下の画像を元に各種フィルターをかけていきます。
写真はFlickrから単純にEmbedしたもの。一切ソフトで手は入れていません。
閲覧するブラウザによっては、なにも変わらない画像が表示されます。

ぼかしをかける

さすがに一部分だけにかけるとかは厳しいですが、写真全体に対してのぼかしはこのようにサクリとかけることができます。ピクセル単位で指定しているので、指定ピクセルの値を大きくすることでぼかしを強くすることができます。

filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

明るさを変える

明るさもこのように簡単に変えられます。厳密にソフトで明るさを調整した時とは微妙に違う感じもしますけど。指定できる値は0.1〜1、あるいは1〜100%まで。マイナス方向に指定することで写真を暗くすることができます。

filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);

彩度を変える

彩度もこのように変化します。値は%指定。数値のみを入れた場合は、温度監視カメラのような色合いになります。

filter: saturate(40%);
-webkit-filter: saturate(40%);
-moz-filter: saturate(40%);
-o-filter: saturate(40%);
-ms-filter(40%)

色相を変える

hue-rotateを使うことで、写真の色相を変化させます。これはかなりいいんじゃないでしょうかね。値の指定には角度指定(deg)をするようにしましょう。

filter: hue-rotate(30deg);
-webkit-filter: hue-rotate(30deg);
-moz-filter: hue-rotate(30deg);
-o-filter: hue-rotate(30deg);
-ms-filter: hue-rotate(30deg);

コントラストを変える

明るさを変えられるなら、もちろんコントラストだって変えられます。
100%をデフォルトとして数値を上げるとコントラストが高くなり、数値を下げるとコントラストが低くなります。

filter: contrast(140%);
-webkit-filter: contrast(140%);
-moz-filter: contrast(140%);
-o-filter: contrast(140%);
-ms-filter: contrast(140%);

階調を反転させる

うーん、ここまでできるんですねーCSS3。
階調を反転させるなんて、そうそう使うことはないような気もしますけど一応。0〜100%で指定することができます。

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

グレースケールにする

グレースケールもお手の物です。grayscaleという要素で指定していますが、彩度を変化させるsaturateで一番低い値を入れてやれば同じようにグレースケールになります。

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

セピアカラーにする

グレースケールができるんですからセピアだってもちろんいけちゃいますよ。
グレースケールもそうですが、ちょっと写真に変化を持たせたいんだよねーという人に、気軽に使ってもらいたいですね。

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

複数指定もできる

ここまで紹介してきたものは、写真に対して複数指定することもできます。
例えば明るさとコントラストを組合せたり、それに彩度や色相の変化をつけたり。グレースケールやセピアも、組合せのしかたでもっと良い感じにすることができるでしょう。

こちらは、明るさとコントラストを少々上げて、彩度色相を調整したもの。PhotoshopがなくてもCSS3だけでこれくらいのことが可能になってくるとはねぇ。。

もちろん、対応していないブラウザもあるので、その場合にはまったく意味のないものになってしまいますが、覚えておいて損はないと思います。