CSS filter(フィルター)は、要素に各種エフェクトをかけられるプロパティです。
filterを使いこなすことで、
photoshopを使わなくてもぼかしやグレースケール化から明度や彩度の調整までできます。
また、フィルターは組み合わせて使うことも可能です。
画像自体に手を加えなくてもいいので、元の画像を保持できるのも利点ですね。
今回はそんなfilterプロパティについて解説します。
デモはこちら
https://codepen.io/aoyagiSol/full/eXeLdv
画像の明るさを調整するCSSフィルターです。%で指定。
0以上の値が使えます。0％にすると真っ黒になり、100％でオリジナルの画像が表示されます。
100％以上の値を指定すると、画像を明るくできます。
img {
filter: brightness(300%);
}色相を回転させるCSSフィルターです。deg(角度)で指定。
0degでオリジナルの画像が表示されます。
360degで一回転するので、180degなら色が反転し、360degもオリジナルの画像に戻ります。
img {
filter: hue-rotate(90deg);
}彩度を調整するCSSフィルターです。%で指定。
0％にすると彩度がなくなり、100％でオリジナルの画像が表示されます。
100％以上の値を指定すると、画像を鮮やかにできます。
このフィルターでは負の値は使えません。
img {
filter: saturate(0%);
}階調を反転するCSSフィルターです(ネガポジ反転)。%で指定。
0％でオリジナル画像が表示され、100％で完全に反転します。
値を50%にすると、灰色1色になります。
img {
filter: invert(100%);
}画像のコントラストを調整するCSSフィルターです。%で指定。
0以上の値が使えます。値を0％にすると灰色1色になります。
100％でオリジナルの画像が表示されます。
img {
filter: contrast(50%);
}画像を「グレースケール」にするCSSフィルターです。%で指定。
0％でオリジナル画像が表示され、100％で完全にグレーになります。
sturate(0%)はgrayscale(100%)と同じフィルターとなります。
このフィルターでは負の値は使えません。
img {
filter: grayscale(100%);
}画像を「セピア」にするCSSフィルターです。%で指定。
0％でオリジナル画像が表示され、100％で完全にセピアになります。
このフィルターでは負の値は使えません。
img {
filter: sepia(100%);
}画像をぼかすCSSフィルターです。pxで指定。
0pxでオリジナル画像が表示され、値が大きくなるほどぼかしの度合いが強くなります。
「％」での指定はできません。
img {
filter: blur(1px);
}画像を半透明にするCSSフィルターです。%で指定。
100％で完全に不透明、0％で完全に透明になります。
このフィルターはopacityプロパティで代用でき、
filter: opacity(70%)とopacity: 70%は同じ意味です。
img {
filter: opacity(75%);
}画像にドロップシャドウ効果をかけるCSSフィルターです。
このプロパティでは、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フィルタは複数利用することができます。
適用したいフィルターを続けて入力するだけで重ねがけ可能です。
モノクロでぼかされた画像なども作成できますね。
また、アニメーションなどと組み合わせることもできるので
組み合わせ次第で面白い表現を作ることができそうです。
CSSフィルタに対応しているブラウザとそのバージョンは下記の通りとなります。
https://caniuse.com/#feat=css-filters
ieは非対応のようですね。対応ブラウザについても
ベンダープレフィックスが必要みたいですので随時追加しましょう。
しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！