読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる

CSS jQuery JavaScript FileAPI

CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる

CSS3 のfilter を試してみました。

サンプル

画像を選択して、input "range"で、filter の効果を付与できます。filter の効果を重ねることもできます。

cartman0.github.io

filter: grayscale(100%)
filter: grayscale(100%) にした場合

対応ブラウザ

CanIuseで確認すると、現時点(2015年07月03日)では、Firefox 以外はベンダープリフィックスが必要のようです。

Can I use... Support tables for HTML5, CSS3, etc

対応しているベンダープリフィックスは、-webkit- のみのようです。 IE は対応していません。 したがって、以下のように2つ指定してあげれば良さそうです。

        

XX {
 -webkit-filter: YY();
 filter: YY();
}

使用できる効果

使用できる効果は約10 種類あるようです。

grayscale(グレースケール)

0(初期値) - 100[%] を指定してあげることで、画像の表示をグレースケールに変換することができます。

          

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

sepia(セピア)

0(初期値) - 100[%] を指定してあげることで、画像の表示をセピア調に変換することができます。

          

-webkit-filter: sepia(100%);
filter: sepia(100%);

saturate(彩度)

0 - 100(初期値)[%] を指定してあげることで、画像の表示の彩度(色の鮮やかさ)を変更することができます。

          
            -webkit-filter: saturate(0%);
            filter: saturate(0%);
          
        

hue-rotate(色相回転)

0(初期値) - 360[deg] を指定してあげることで、画像の表示の色相を変更することができます。

360deg も指定することができるが、0deg と同じなので元の色相になります。

          

-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);

invert(階調反転)

0(初期値) - 100[%] を指定してあげることで、画像の表示の階調を反転させることができます。

          

-webkit-filter: invert(100%);
filter: invert(100%);

opacity(透過度)

0 - 100(初期値)[%] を指定してあげることで、画像の表示の透過度を変更することができます。

CSS3 のopacity: XX%;とほぼ同じような効果です。

          

-webkit-filter: opacity(0%);
filter: opacity(0%);

brightness(明るさ)

0 - 100(初期値)[%] を指定してあげることで、画像の表示の明るさを変更することができます。

元画像より暗くしたい場合に使えます。brightness(0%) で画像は真っ黒になります。

          

-webkit-filter: brightness(0%);
filter: brightness(0%);

contrast(コントラスト)

0 - 100(初期値)[%] を指定してあげることで、画像の表示のコントラストを変更することができます。

明るさ同様、コントラストを下げたい場合に使用できます。

          

-webkit-filter: contrast(0%);
filter: contrast(0%);

blur(ぼかし)

0(初期値) - 任意の値[px] を指定してあげることで、画像の表示をぼかすことができます。

         

-webkit-filter: blur(3px);
filter: blur(3px);

drop-shadow(影)

CSS3 のbox-shadow と同じようです。

          

-webkit-filter: drop-shadow(0px 0px 10px #000);
filter: drop-shadow(0px 0px 10px #000);

複数効果

filter: の後に、複数の効果(関数)を追加することで、複数の効果を付与できます。

例えば、以下のようにできます。

        

-webkit-filter: grayscale(50%) sepia(50%);
filter: grayscale(50%) sepia(50%);

※ただし、grayscale()sepia()は、行列計算を行っているので、 厳密に行うならば順番を考慮する必要があると思います。