フィルタプロパティ

𝐂𝐒𝐒 𝐜𝐚𝐧 𝐛𝐞 𝐮𝐬𝐞𝐝 𝐭𝐨 𝐚𝐩𝐩𝐥𝐲 𝐚 𝐟𝐢𝐥𝐭𝐞𝐫 𝐭𝐨 𝐲𝐨𝐮𝐫 𝐢𝐦𝐚𝐠𝐞😎.
The 𝒇𝒊𝒍𝒕𝒆𝒓 𝒑𝒓𝒐𝒑𝒆𝒓𝒕𝒚 項目視覚効果を与えます.これは、カスタムのSVGフィルタを作成する機能だけでなく、ぼかし、明るさ、コントラスト、色相、セピアのような定義済みの機能があります.
その結果、簡単にあなたのイメージをより魅力的にするために属性の値を微調整することができます.これが同じデモです.

ぼかし

入力画像にガウスのぼかしを適用します.' radius 'の値は、ガウス関数への標準偏差の値、またはスクリーン上のどのように多くのピクセルがブレンドされているかを定義するので、より大きな値がよりぼやけます.パラメータが指定されない場合、値0が使用されます.パラメータはCSSの長さとして指定されますが、パーセンテージ値を受け入れません.

.img{
filter:blur(8px);
}

明るさ

入力画像に線形乗算器を適用します.0 %の値が完全に黒であるイメージを作成します.100 %の値が入力を変更しません.他の値は、効果の線形乗算器です.100 %以上の量の値は、明るい結果を提供する許可されています.「量」パラメータがなくなっているならば、100 %の値は使用されます.

.img{
filter:brightness(1.5);
}

コントラスト

入力のコントラストを調整します.0 %の値が完全に黒であるイメージを作成します.100 %の値が入力を変更しません.100 %以上の量の値は、少ないコントラストで結果を提供する許可されています.「量」パラメータがなくなっているならば、100 %の値は使用されます.

 img{
filter:contrast(250%);
}

色相回転

入力画像に色相の回転を適用します.「角度」の値は、入力サンプルが調整される色円のまわりの程度の数を定義します.0 degの値は入力を変更しない.“angle”パラメータが見つからない場合、0 degの値が使用されます.最大値は360 degである.

.img{
filter:hue-rotate(60deg);
}

インバート

入力画像のサンプルを反転します.「量」の値は変換の割合を定義する.100 %の値は完全に反転されます.0 %の値は入力を変更しません.0 %と100 %の間の値は、効果の線形乗算器です.「量」パラメータがなくなっているならば、100 %の値は使用されます.負の値は使用できません.

.img{
filter:invert(85%);
}

飽和する

入力画像を飽和させる.「量」の値は変換の割合を定義する.0 %の値は完全に飽和していない.100 %の値が入力を変更しません.他の値は、効果の線形乗算器です.100 %以上の値は、超飽和結果を提供する許可されています.「量」パラメータがなくなっているならば、100 %の値は使用されます.負の値は使用できません.

.img{
filter:saturate(50%);
}

セピア色

入力画像をセピアに変換します.「量」の値は変換の割合を定義する.100 %の値は完全にセピア色です.0の値は入力をそのままにします.0 %と100 %の間の値は、効果の線形乗算器です.「量」パラメータがなくなっているならば、100 %の値は使用されます.負の値は使用できません.

.img{
filter:sepia(80%);
}

複数のフィルタ

.img{

filter:hue-rotate(70deg);
filter:saturate(145%);
filter:brightness(145%);
}

CSS Filterプロパティは、要素が表示される前に、要素のレンダリングでぼかしや色のシフトのような効果へのアクセスを提供します.フィルタは一般的に、画像、背景、または境界線のレンダリングを調整するために使用されます.