CSSフィルター効果を使用した画像のフィルター

グラフィックエディターでは、画像の明るさやコントラストの変更、さまざまなフィルターの適用が非常に簡単です。 最近、これは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の例