フイルタ(CSS)

|色調変更ヒストグラムフイルタフイルタ(CSS)サイトマップホーム

CSS フイルター(Cascading Style Sheets Filter)は、Webコンテンツの要素に色々なエフェクトをかけられるものです。
その設定機能のお試しが出来ます。

アップロード画像 : px
サンプル画像 :
個別設定
サンプル設定( red green blue white yellow orange aqua purple)

0階調;invert(0-100%)
0セピア:sepia(0-100%)
100コントラスト:contrast(0-500%)
0グレイスケール:grayscale(0-100%)
100明暗:brightness(0-500%)
100彩度:saturate(0-8000%)
0色相:hue-rotate(0-360deg)
100透明度:opacity(0-100%)
0ぼかし:blur(0-10px)
******

項目説明

  • 明度の変更(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);の指定した画像を示します。


|色調変更ヒストグラムフイルタフイルタ(CSS)サイトマップホーム