CSS3 Filterのサンプルページ

このページでは、CSS3フィルターを使ってみたサンプルページです。
CSS3フィルターそれぞれの効果を知ること、その使い方を知る事をこのページの目標としています。


CSS3フィルターの詳細は、 Filter Effect 1.0 @W3C を参照ください。


CSS3 Fitler適用前の状態



CSS3 Fitler(grayscale)


grayscale(number | persentage)

表示要素をグレースケールで表示できるフィルター。
100%が完全にグレースケールで、0%が全く効果なしの状態となる。
初期値は100%のようです。
-webkit-filter:grayscale(100%);


CSS3 Fitler(sepia)


sepia(number | persentage)

表示要素をセピアで表示できるフィルター。
100%が完全にセピアで、0%が全く効果なしの状態となる。
初期値は100%のようです。
-webkit-filter:sepia(100%);


CSS3 Fitler(hue-rotate)


hue-rotate(angle)

表示要素のHueを変化させるフィルター。
0〜360の間で値を指定できる。
0の場合には、Hueは全く変化しない状態。
初期値は0degです。
-webkit-filter:hue-rotate(180deg);


CSS3 Fitler(invert)


invert(number | persentage)

表示要素の色を反転させるフィルター。
0%〜100%の間で値を指定できる。
0%の場合には全く変化しない状態で、100%の場合には完全に色が反転する。
初期値は100%です。
-webkit-filter:invert(100%);


CSS3 Fitler(opacity)


opacity(number | persentage)

表示要素を透明にするフィルター。
0%〜100%の間で値を指定できる。
100%の場合には全く変化しない状態で、0%の場合には完全に透明となる。
初期値は100%です。
-webkit-filter:opacity(50%);


CSS3 Fitler(brightness)


brightness(number | persentage)

表示要素の輝度を変化させるフィルター。
0%〜100%の間で値を指定できる。
100%の場合には全く変化しない状態で、0%の場合には真っ黒になる。
100%以上の値も指定可能で、その場合にはより明るい効果を得る。
(* 現在のChromeやSafariの実装は上記と違うようです。)
初期値は100%です。
-webkit-filter:brightness(50%);


CSS3 Fitler(contrast)


contrast(number | persentage)

表示要素のコントラストを変化させるフィルター。
0%〜100%の間で値を指定できる。
100%の場合には全く変化しない状態で、0%の場合には真っ黒になる。
100%以上の値も指定可能で、その場合にはよりコントラストの低い効果を得る。
(* 現在のChromeやSafariの実装は上記と違うようです。)
初期値は100%です。
-webkit-filter:contrast(50%);


CSS3 Fitler(blur)


blur(length)

表示要素にガウシアンぼかしをかけるフィルター。
CSSでの距離(10pxとか)を指定できる。
0pxの場合には全く変化しない状態となる。
初期値は0pxです。
-webkit-filter:blur(0px);


CSS3 Fitler(drop-shadow)


drop-shadow(shadow)

表示要素にドロップシャドウをかけるフィルター。
CSSのShadowを指定できる。
-webkit-filter:drop-shadow(10px 10px 2px rgba(0,0,0,0.5));




参考資料
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction


その他情報