CSSフィルタ効果による画像調整

画像を調整する 輝度 そして コントラスト, または画像をに変える グレースケール または セフィア これは、画像編集アプリケーションによく見られる機能です。 フォトショップ. しかし、CSSを使用してWeb画像に同じ効果を追加することが可能になりました.

この機能は、実際にはまだ草案段階にあるフィルタ効果から来ています。しかし、Webkitブラウザは、この機能を実装する上でのステップの一歩のようです.

それでは、試してみましょう。効果を示すためにMehdi Khのこの画像を使用します。.

効果

効果を適用するのはとても簡単です。下のスニペットを見てください。 グレースケール;

 img -webkit-filter：グレースケール（100％）;  

…そしてこれは セピア ala Instagramの.

 img -webkit-filter：sepia（100％）;  

両方 セピア そしてその グレースケール 値はパーセンテージで示されています 100％が最大で適用 0％ イメージは変更されませんが、値が明示的に指定されていない場合は 100％ デフォルトとして採用されます.

画像を明るくすることも可能です。 輝度 次のように機能します。

 img -webkit-filter：明るさ（50％）;  

明るさ効果は、上のコントラストとセピア効果のように機能します。 0％ 画像をそのままにして適用する 100％ 画像を明るくします。画像の代わりに空白の白いページしか表示されない可能性があります。.

明るさの効果も 負の値を許容, それはそれになります 画像を暗くする.

 img -webkit-filter：明るさ（-50％）;  

…そしてこのようにして画像のコントラストを調整できます.

 img -webkit-filter：コントラスト（200％）;  

上記のように、値がどのように機能するかについても少し違いがあります。 コントラスト（） によって 200％, これは、 100％ 画像が変更されないままになる開始点です。値が以下の場合 100％, 50％としましょう、画像はコントラストが少なくなります.

さらに、以下の例のように、1つの宣言ブロックで効果を組み合わせることもできます。画像をに変える グレースケール そして増加する コントラスト 同時に50％.

 img -webkit-filter：グレースケール（100％）コントラスト（150％）;  

フィルタをCSS3トランジションと組み合わせることで、優雅なものにすることができます。 ホバー 効果.

 img：hover -webkit-filter：グレースケール（0％）;  img：hover -webkit-filter：sepia（0％）;  img：hover -webkit-filter：明るさ（0％）;  img：hover -webkit-filter：コントラスト（100％）;  

最後に、もう1つ試すことができる効果があります。の ガウスぼかし, ターゲット要素をぼかします.

 img：hover -webkit-filter：blur（5px）;  

Photoshopと同様に、ぼかしの値はピクセルの半径で表され、値が明示的に示されていない場合は、0がデフォルトとして使用され、画像はそのままの状態になります。.

最終的な考え

仕様には実際にはもっとたくさんの効果があります。といった 色相回転, 反転する そして 飽和する, しかし、実際のWebのケースではそれらはあまり適用されないと思います。したがって、議論は4つの効果に限定されていました.

そして、このチュートリアルで議論が画像に適用されているにもかかわらず、プロパティは実際にはDOMのあらゆる要素にも適用することができます。.

最後に、以下のリンクからライブデモを見ることができます。フィルタは現在のところでのみサポートされていることに注意してください クローム19 以上.

• デモ
• ソースをダウンロード