グラフィックエディターでは、画像の明るさやコントラストの変更、さまざまなフィルターの適用が非常に簡単です。 最近、これはCSSフィルター効果を使用してWebページで直接CSSツールを使用して行うこともできます。
デモ /
ソースのダウンロード /
仕様フィルター効果1.0 ブラウザのサポート
いつものように、このオプションをサポートするブラウザは
caniuse.comで見ることができます：
効果
エフェクトの適用は非常に簡単です。たとえば、このデザインは、カラーイメージを白黒に変換するために使用されます。
img { -webkit-filter: grayscale(100%); }
セピア、ala Instagram：
img { -webkit-filter: sepia(100%); }
両方の効果で、効果レベルを0〜100％に設定できます。
明るさ、50％：
img { -webkit-filter: brightness(50%); }
輝度は負の値を取ることができ、画像は暗くなります：
img { -webkit-filter: brightness(-50%); }
100％のコントラスト効果では、画像は変化しないため、200％を設定できます。
img { -webkit-filter: contrast(200%); }
効果は組み合わせることができます：
img { -webkit-filter: grayscale(100%) contrast(150%); }
したがって、美しいホバー効果を得ることができます。
img:hover { -webkit-filter: grayscale(0%); } img:hover { -webkit-filter: sepia(0%); } img:hover { -webkit-filter: brightness(0%); } img:hover { -webkit-filter: contrast(100%); }
ぼかし効果：
img:hover { -webkit-filter: blur(5px); }
仕様では、色相の回転、反転、飽和などの他の効果について詳しく説明しています。 ただし、ライブプロジェクトにはあまり適用されません。
hongikat.comの例