CSS3 フィルタ(Filters)

CSS3フィルタ効果は画像に視覚効果を適用する簡単な方法を提供します。

CSSを理解する3フィルタ機能について説明します。

本章では、CSS3で導入されたフィルタ効果を使用して、画像などのグラフィック要素に視覚効果操作（例えばぼかし、コントラストや明るさのバランス、色の飽和度など）を行う前に、フィルタ効果をウェブページに描画する前に操作できます。

CSS3 filter属性は要素にフィルタ効果を適用し、提供された順序で1つ以上のフィルタ機能を受け入れます。以下は使用例です：

filter:　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

警告：Internet Explorerのいかなるバージョンも現在、CSS3フィルタ効果。古いIEバージョンでは、不透明度などの効果を作成するために非標準のfilter属性をサポートしていましたが、この機能は廃止されました。

ぼかし効果

ガウス模糊効果のようなPhotoshopのblur()機能を使用して、要素に適用できます。この関数は、ぼかし半径を定義するCSS長さ値を受け入れます。大きな値はより多くのぼかしを生み出します。パラメータが提供されていない場合、値0が使用されます。

img　{
　　　　-webkit-filter:　blur(5px);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　blur(5px);
}

—上記の例の出力は以下の通りです：

画像の明るさを設定

brightness()機能は画像の明るさを設定するために使用されます。の値0％は全く黒い画像を作成します。一方、100%または1画像を変更しません。他の値は効果の線形乗数です。

明るさを高い設定にできます。100％を使用して、画像を明るくします。数量パラメータが欠けている場合、1。負の値は使用できません。

img.bright　{
　　　　-webkit-filter:　brightness(200%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　brightness(200%);
}
img.dark　{
　　　　-webkit-filter:　brightness(50%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　brightness(50%);
}

—上記の例の出力は以下の通りです：

画像のコントラストを調整

contrast()機能は画像のコントラストを調整するために使用されます。の値0％は全く黒い画像を作成します。一方、100%または1画像を変更しません。また、100％の値を使用して、低いコントラストの結果を提供します。数量パラメータが欠けている場合や省略されている場合、1値を使用します。

img.bright　{
　　　　-webkit-filter:　contrast(200%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　contrast(200%);
}
img.dim　{
　　　　-webkit-filter:　contrast(50%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　contrast(50%);
}

—上記の例の出力は以下の通りです：

画像に影を追加します

dropshadow-shadow()関数は、Photoshopなどの画像に影効果を適用します。この機能は以下のbox-shadow属性。

img　{
　　　　-webkit-filter:　drop-shadow(4px　4px　10px　orange);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　drop-shadow(4px　4px　10px　orange);
}

—上記の例の出力は以下の通りです：

画像をグレースケールに変換します

このgrayscale()機能を使用して画像をグレースケールに変換できます。の値100%は完全にグレースケールです。0%の値は画像を変更しません。0%までの値で、100%は効果の線形乗数です。'amount'パラメータが欠けている場合、デフォルトで0を使用します。

img.complete-gray　{
　　　　-webkit-filter:　grayscale(100%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter:　grayscale(50%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　grayscale(50%);
}

—上記の例の出力は以下の通りです：

画像に色相回転を適用します

このhue-rotate()関数は画像に色相回転を適用します。渡されたパラメータは、画像のサンプルの色環周囲の度数を定義します。0degの値は画像を変更しません。angleが欠けている場合、39; 'パラメータ、0degを使用します。最大値はありません、上記の値が効果を決定します。360deg回繰り返し。

img.hue-normal　{
　　　　-webkit-filter:　hue-rotate(150deg);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter:　hue-rotate(480deg);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　hue-rotate(480deg);
}

—上記の例の出力は以下の通りです：

反転効果

invert()関数を使用して、Photoshopなどの反転効果を画像に適用できます。 100％または1の値は完全に反転されます。0％の値は入力を変更しません。0％から100％までの値は効果の線形乗数です。'amount'パラメータが欠けている場合、デフォルトで0を使用します。負の値の使用は許可されていません。

img.partially-inverted　{
　　　　-webkit-filter:　invert(80%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter:　invert(100%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　invert(100%);
}

—上記の例の出力は以下の通りです：

画像に不透明度を適用します

opacity()機能を使用して画像に透明度を追加できます。値0%は完全に透明です。の値100%または1画像を変更せずに保持します。値0%は0%までの間の値で、100%は効果の線形乗数です。&が欠けている場合、39; amount'パラメータがない場合、値を使用します1。この機能は以下のopacity属性。

img　{
　　　　-webkit-filter:　opacity(80%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　opacity(80%);
}

—上記の例の出力は以下の通りです：

画像に茶色系の効果を適用します

このsepia()機能は画像をセピアトーンに変換します。の値100％または1完全に深褐色です。値0％は画像がそのままになります。値0％から100%は効果の線形乗数です。&が欠けている場合、39; amount'パラメータがない場合、値0を使用します

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　sepia(30%);
}

—上記の例の出力は以下の通りです：

画像の鮮度を調整

このsaturate()機能は画像の鮮度を調整するために使用できます。値0％は完全不鮮やかです。値100％で画像がそのままになります。他の値は効果の線形乗数です。また、値が100％で超鮮やかな結果を提供します。&が欠けている場合、39;amount 'パラメータがない場合、値を使用します1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome、　Safari、　Opera　*/
　　　　filter:　saturate(200%);
}

—上記の例の出力は以下の通りです：