ページのイメージ
WEB開発デザイン 2018/11/22

CSSのfilterで画像加工をする方法とフィルターまとめ

  •  
  • このエントリーをはてなブックマークに追加

CSSのfilterとは

CSSのfilter(フィルター)は、要素に各種エフェクトをかけられるプロパティです。

filterを使いこなすことで、
photoshopを使わなくてもぼかしやグレースケール化から明度や彩度の調整までできます。
また、フィルターは組み合わせて使うことも可能です。
画像自体に手を加えなくてもいいので、元の画像を保持できるのも利点ですね。
今回はそんなfilterプロパティについて解説します。

デモはこちら

http://jsdo.it/a-o-yagi/21ri/fullscreen

明度の変更(Brightness)

画像の明るさを調整するフィルターです。%で指定。
0以上の値が使えます。0%にすると真っ黒になり、100%でオリジナルの画像が表示されます。
100%以上の値を指定すると、画像を明るくできます。

img {
  filter: brightness(300%);
}

色相の変更(Hue-rotate)

色相を回転させるフィルターです。deg(角度)で指定。
0degでオリジナルの画像が表示されます。
360degで一回転するので、180degなら色が反転し、360degもオリジナルの画像に戻ります。

img {
  filter: hue-rotate(90deg);
}

彩度の変更(Saturate)

彩度を調整するフィルターです。%で指定。
0%にすると彩度がなくなり、100%でオリジナルの画像が表示されます。
100%以上の値を指定すると、画像を鮮やかにできます。
このフィルターでは負の値は使えません。

img {
  filter: saturate(0%);
}

階調・ネガポジ反転(Invert)

階調を反転するフィルターです(ネガポジ反転)。%で指定。
0%でオリジナル画像が表示され、100%で完全に反転します。
値を50%にすると、灰色1色になります。

img {
  filter: invert(100%);
}

コントラスト(Contrast)

画像のコントラストを調整するフィルターです。%で指定。
0以上の値が使えます。値を0%にすると灰色1色になります。
100%でオリジナルの画像が表示されます。

img {
  filter: contrast(50%);
}

グレースケール・モノクロ(Grayscale)

画像を「グレースケール」にするフィルターです。%で指定。
0%でオリジナル画像が表示され、100%で完全にグレーになります。
sturate(0%)はgrayscale(100%)と同じフィルターとなります。
このフィルターでは負の値は使えません。

img {
  filter: grayscale(100%);
}

セピア(Sepia)

画像を「セピア」にするフィルターです。%で指定。
0%でオリジナル画像が表示され、100%で完全にセピアになります。
このフィルターでは負の値は使えません。

img {
  filter: sepia(100%);
}

ぼかし(Blur)

画像をぼかすフィルターです。pxで指定。
0pxでオリジナル画像が表示され、値が大きくなるほどぼかしの度合いが強くなります。
「%」での指定はできません。

img {
  filter: blur(1px);
}

透明度・透過率(Opacity)

画像を半透明にするフィルターです。%で指定。
100%で完全に不透明、0%で完全に透明になります。
このフィルターはopacityプロパティで代用でき、
filter: opacity(70%)とopacity: 70%は同じ意味です。

img {
  filter: opacity(75%);
}

影・ドロップシャドウ(Drop Shadow)

画像にドロップシャドウ効果をかけるフィルターです。
このプロパティでは、x軸方向(水平方向)・y軸方向(垂直方向)・影の広がり・色の指定ができます。
影の色は#000(黒)です。

box-shadowにも似ていますが、box-shadowではdivの要素そのものに影がつきます。
例えば透過されたpng画像に適応した場合、box-shadowではboxに影がつきますが
filter: drop-shadowでは、画像内の透明部分にも影が適応されます。

img {
  filter: drop-shadow(5px 5px 10px #666);
}

url()メソッドというsvgに定義したフィルターを参照する機能もあります。
フィルター効果をカスタマイズすることができるので、より高度な表現も可能です。

フィルタの重ねがけ

フィルタは複数利用することができます。
適用したいフィルターを続けて入力するだけで重ねがけ可能です。
モノクロでぼかされた画像なども作成できますね。

また、アニメーションなどと組み合わせることもできるので
組み合わせ次第で面白い表現を作ることができそうです。

対応ブラウザ

CSSフィルタに対応しているブラウザとそのバージョンは下記の通りとなります。

https://caniuse.com/#feat=css-filters

ieは非対応のようですね。対応ブラウザについても
ベンダープレフィックスが必要みたいですので随時追加しましょう。

 

 

 


しずおかオンライン中途採用社員も、積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!

Category

Ranking