******
項目説明
- 明度の変更(Brightness)
画像の明るさを調整するフィルターです。0%にすると真っ黒になり、100%でオリジナルの画像が表示されます。
100%以上の値を指定すると、画像を明るくできます。 - 色相の変更(Hue-rotate)
色相を回転させるフィルターです。deg(角度)で指定。0degでオリジナルの画像が表示されます。
360degで一回転するので、180degなら色が反転し、360degもオリジナルの画像に戻ります。
参考で「色環」をご覧ください。 - 彩度の変更(Saturate)
彩度を調整するフィルターです。0%にすると彩度がなくなり、100%でオリジナルの画像が表示されます。
100%以上の値を指定すると、画像を鮮やかにできます。
- 階調・ネガポジ反転(Invert)
階調を反転するフィルターです(ネガポジ反転)。0%でオリジナル画像が表示され、100%で完全に反転します。
値を50%にすると、灰色になります。
- コントラスト(Contrast)
画像のコントラストを調整するフィルターです。値を0%にすると灰色になります。
100%でオリジナルの画像が表示されます。
- グレースケール・モノクロ(Grayscale)
画像を「グレースケール」にするフィルターです。0%でオリジナル画像が表示され、100%で完全にグレーになります。
sturate(0%)はgrayscale(100%)と同じフィルターとなります。 - セピア(Sepia)
画像を「セピア」にするフィルターです。0%でオリジナル画像が表示され、100%で完全にセピアになります。
- ぼかし(Blur)
画像をぼかすフィルターです。0pxでオリジナル画像が表示され、値が大きくなるほどぼかしの度合いが強くなります。 - 透明度・透過率(Opacity)
画像を半透明にするフィルターです。100%で完全に不透明、0%で完全に透明になります。 - 影・ドロップシャドウ(Drop Shadow)
画像にドロップシャドウ効果をかけるフィルターです。
指定では、x軸方向(水平方向)・y軸方向(垂直方向)・影の広がり・色の指定ができます。
次に、 cssフイルターでdrop-shadow(5px 5px 10px #00f);の指定した画像を示します。
|