使用できる効果
filter を使って画像にいろいろな効果を加えることができます。例えばモノクロやセピアカラーにするとか、カーソルを合わせると画像の色調を変化させる…なんて使い方もできます。
使用できる効果は約10種類程あるようです。
右の画像が元画像で、以下それぞれの効果を反映させています。
ちなみに上のヘッダー部分は「filter: hue-rotate」を使用して、
グラデーションで指定した背景に「animation」効果を反映させています。
画像に対してだけでなく、応用が効くってことですね。
header {
z-index: 1;
display: block;
width: 70%;
margin: 40px auto;
padding: 10px;
background: linear-gradient(30deg, #a6d900 0%, #ff4454 100%);
animation: huerotator 10s infinite alternate;
}
@keyframes huerotator {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
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(50%); filter: saturate(50%);
hue-rotate（色相回転）
0（初期値）〜 360deg を指定することで、画像の色相を変更することができます。
360deg も指定することができますが、0deg と同じなので元の色相になります。
-webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);
invert（階調反転）
0（初期値）〜 100% を指定することで、画像の階調を反転させることができます。
-webkit-filter: invert(100%); filter: invert(100%);
opacity（透過度）
0 〜 100%（初期値） を指定することで、画像の透過度を変更することができます。
CSS3 の「opacity: %;」と同じような効果です。
-webkit-filter: opacity(50%); filter: opacity(50%);
brightness（明るさ）
0 〜 100%（初期値） を指定することで、画像の明度を下げることができます。
元画像より暗くしたい場合に使えます。brightness(0%) で画像は真っ黒になります。
-webkit-filter: brightness(70%); filter: brightness(70%);
contrast（コントラスト）
0 〜 100%（初期値） を指定することで、画像のコントラストを変更することができます。
明るさ同様、コントラストを下げたい場合に使用できます。
-webkit-filter: contrast(50%); filter: contrast(50%);
blur（ぼかし）
0（初期値）〜 任意の値[px] を指定することで、画像の表示をぼかすことができます。
-webkit-filter: blur(1px);
filter: blur(1px);
drop-shadow（影）
CSS3 の「box-shadow」と同じ効果です。
-webkit-filter: drop-shadow(1px 4px 5px #666); filter: drop-shadow(1px 4px 5px #666);
複数効果
filter: の後に、複数の効果（関数）を追加することで、複数の効果を付与できます。
例えば、以下のようにできます。
-webkit-filter: grayscale(50%) sepia(50%); filter: grayscale(50%) sepia(50%);
※ただし、grayscale() と sepia()は、行列計算を行っているので、 厳密に行うならば順番を考慮する必要があると思います。