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したもの。一切ソフトで手は入れていません。
閲覧するブラウザによっては、なにも変わらない画像が表示されます。

SwitchEasy CapsuleRebel for iPhone4S/4

ぼかしをかける

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

明るさを変える

SwitchEasy CapsuleRebel for iPhone4S/4

明るさもこのように簡単に変えられます。厳密にソフトで明るさを調整した時とは微妙に違う感じもしますけど。指定できる値は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);

彩度を変える

SwitchEasy CapsuleRebel for iPhone4S/4

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

SwitchEasy CapsuleRebel for iPhone4S/4

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

色相を変える

SwitchEasy CapsuleRebel for iPhone4S/4

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);

コントラストを変える

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

階調を反転させる

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

グレースケールにする

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

セピアカラーにする

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

複数指定もできる

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

SwitchEasy CapsuleRebel for iPhone4S/4

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

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

「Web Technical」新着記事

Movable TypeにおけるAMP(Accelerated Mobile Pages)への基本的な対応方法

Avatar for ホシナ カズキ

ホシナ カズキ

Google Analytics連携でアクセスランキングを作れる「Ranklet」の汎用テンプレートを作ってみた件

Avatar for ホシナ カズキ

ホシナ カズキ

なんか話題のパクリシステム「redo.me.uk」にうちもパクられてた件

Avatar for ホシナ カズキ

ホシナ カズキ

【楽天koboにも対応】カエレバやヨメレバをレスポンシブな紹介リンクにするためのCSSデザイン

Avatar for ホシナ カズキ

ホシナ カズキ

CSSやJavaScriptへのクロールはブロックしないほうがいい! SEOにも影響するぞ

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく