静岡発のホームページ制作・Web集客・映像制作ならIHOLDINGS

メニュー

CSSで画像を白黒・セピア・ぼかし技術!filterで実現可能

311 views
約 1 分
CSSで画像を白黒・セピア・ぼかし技術!filterで実現可能

今まではIllustratorやPhotoshopなどで調整していた明度や彩度の調整から、ぼかしやグレースケール化までCSSで実装可能です。
しかも動画にも使えるなんて便利すぎる!
CSS Filter Effectsこの記事で紹介するCSSフィルター効果でできることのサンプル!
filterはもともとSVG仕様の一部でしたが、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めたんですね。
CSSフィルターは大胆に信じられないほど簡単に使えます。サンプルも用意しているので、コピペして使ってくださいね。

明るさ:brightness()

明るさ(Brightness)フィルターは、画像の明るさを調整します。
パラメータとして、0以上の値が使えます。

0%  → 真っ暗
100% → 原色

0%〜調整でこの画像の明るさを調整できます。
100%以上の値を指定すれば、原色の明るさを超えて画像をさらに明るくできます。
例えば、200%で指定すれば画像が2倍の明るさになります。

{
  filter: brightness(200%);
}
ここをタップして表示Close
指定なし filter: brightness(200%);
レスポンシブデザイン レスポンシブデザイン

コントラスト:contrast()

コントラスト(Contrast)フィルターは、画像のコントラストを調整します。
明るさと同じく、0以上の値が使えます。
コントラストフィルターを使えば、CSSで画像の明るい部分と暗い部分の差を調整できます。

0%  → グレー1色
100% → 原色

100%以上の値を指定すれば、その分の画像のコントラストが大きくなります。

 {
  filter: contrast(0%);
}
ここをタップして表示Close
指定なし filter: contrast(0%);
レスポンシブデザイン レスポンシブデザイン

グレースケール:grayscale()

グレースケール(Grayscale)フィルターは、画像を「グレースケール」にします。
このフィルターでは、画像を少しずつグレーに近づけます。

0%  → 原色
100% → 完全なグレー

負の値は使えません。

{
  filter: grayscale(100%);
}
ここをタップして表示Close
指定なし filter: grayscale(100%);
レスポンシブデザイン レスポンシブデザイン

彩度:saturate()

彩度(Saturate)フィルターは、画像の色の彩度を調整します。

0%  → 無彩色(画像の色彩がなくなる)
100% → 原色

100%以上の値を指定すると画像が思い切り鮮やかになります。

 {
  filter: saturate(0%);
}
ここをタップして表示Close
指定なし filter: saturate(0%);
レスポンシブデザイン レスポンシブデザイン

セピア:sepia()

セピア(Sepia)フィルターは、画像に古い写真のようなセピアがかった色合いを加えます。
セピアの度合いは、値のパーセンテージで決まります。

0%  → 原色
100% → 完全なセピア
 {
  filter: sepia(100%);
}
ここをタップして表示Close
指定なし filter: sepia(100%);
レスポンシブデザイン レスポンシブデザイン

色相反転:hue-rotate()

色相回転(Hue-rotate)フィルターは、画像のすべての色に色相の回転を適用します。
色を回転させる角度は、指定するパラメータの値で決まります。

0deg  → 原色
180deg → 反転色

このフィルターの値に上限はありません。ただし、360degで回転が一周するので原色に戻ります。
それより大きい値の効果は二周目となるだけです。つまり、90degと450degの効果は同じになります。

 {
  filter: hue-rotate(90deg);
}
ここをタップして表示Close
指定なし filter: hue-rotate(90deg);
レスポンシブデザイン レスポンシブデザイン

階調反転: invert()

階調反転(Invert)フィルターは、画像のすべての色の階調を反転します。
反転の度合いは、設定するパラメータの値によって決まります。

0%  → 原色
100% → 反転色
{
  filter: invert(100%);
}
ここをタップして表示Close
指定なし filter: invert(100%);
レスポンシブデザイン レスポンシブデザイン

ぼかし:blur()

ぼかし(Blur)フィルターは、画像にぼかしをかけ、色をにじませて境界の外側に広げます。
半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を決定します。

0px  → 原色
1px  → ややぼかし

値が大きくなるほど、ぼかしの度合いが強くなります。
このフィルターではいろいろな長さの単位で指定できます。
単位が大きくなるとほぼ見えない状態にもなります。
「%」の指定はできません。

 {
  filter: blur(1px);
}
ここをタップして表示Close
指定なし filter: blur(1px);
レスポンシブデザイン レスポンシブデザイン

透明度:opacity()

透明度(Opacity)フィルターでは、画像を半透明にします。

0%  → 透明
100% → 不透明

opacityプロパティとよく似ていますが、パフォーマンスに若干の違いがあります。
filterプロパティの場合は、ブラウザーによってハードウェアアクセラレーションを使用するので、より良いパフォーマンス効果が期待できます。

 {
  filter: opacity(75%);
}
ここをタップして表示Close
指定なし filter: opacity(75%);
レスポンシブデザイン レスポンシブデザイン

ドロップシャドウ:drop-shadow()

ドロップシャドウ(Drop Shadow)フィルターは、画像にドロップシャドウ効果をかけます。
基本的に、入力画像の特定の色のアルファマスクのぼかし、オフセットを指定するというものです。
このプロパティでは、drop-shadow(x軸オフセット y軸オフセット ぼかし半径の値 色の指定)が必要となります。
調整をすれば影をはっきりさせたりぼかしたりすることもできます。

{
  filter: drop-shadow(5px 5px 10px #666);
}
ここをタップして表示Close
指定なし filter: drop-shadow(5px 5px 10px #666);
レスポンシブデザイン レスポンシブデザイン

フィルターの組み合わせとアニメーション

複数のフィルターを組み合わせれば、様々な効果を演出することができます。
たいていの場合、フィルターの順序が問題になることはあまりありませんが、フィルターはCSSで書かれている順に適用され、中にはほかのフィルターをオーバーライドするものもあります。
たとえば、

グレースケールフィルター → セピアフィルター
の順に指定すると、画像はセピアになります。
セピアフィルター → グレースケールフィルター
の順に指定すると、画像はグレースケールになります。

フィルターではアニメーションでも利用できます。
アニメーションを使えば、注目を惹くようなとても面白い効果を演出できます。

一例として、次のコードを参考にしてください。

 {
  animation: hogehoge 3s infinite;
}

@keyframes hogehoge {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}
ここをタップして表示Close
指定なし 複数のアニメーション
レスポンシブデザイン レスポンシブデザイン

CSS Filtersの動作環境 〜 IE以外は動く

最後にCSS Filtersの動作環境について紹介します。
モバイルを含む最近のモダンブラウザー(MS Edge、Chrome、Firefox、Safari)は標準対応しています。
ただし、唯一使えないのが、Internet Explorerですね。参照:「Can I use」

2015年頃のSafariやAndroid 4.4の標準ブラウザまではベンダープレフィックスが必要になるので、
-webkit-だけは付与しておいた方がいいですね(-moz-や-ms-は必要ありません)。

終わりに

いかがでしたでしょうか?
今回は「CSSで画像を白黒・セピア・ぼかし技術!filterで実現可能」について記事を書きました。最近のブラウザではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきました。
2025年までサポートが続くと言われるInternet Explorer 11がCSS Filtersに未対応のためプロジェクトによっては使いづらい一面があると思いますが、選択肢の一つとして演出の引き出しに入れてみてはいかがでしょうか。

Writer

F.Ryu
Webのコーディングを担当しています。
主にhtml,CSS,php,jQuery,JavaScriptを扱っています。
毎日新しいコードに出会うことで想像する未来が広がって楽しいです。
多くの方にWebを通して貢献していきたいと思っています。

コメントする

*

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Google +
Pinterest
Pocket
Evernote