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


その他情報