filterを使用した画像の処理

※ 画像をhoverすると効果が消えます
ぼかし(blur) 3px

モノクロ(grayscale) 100%

セピア(sepia)100%

明度(brightness) 50%

明度(brightness) 150%

彩度(saturate) 50%

彩度(saturate) 200%

コントラスト(contrast) 50%

コントラスト(contrast) 200%

コントラスト 150%
+
セピア 50%

モノクロ 80%
+
彩度 80%

彩度 150%
+
明度 50%

mix-blend-mode
※ 画像をhoverすると効果が消えます
乗算
mix-blend-mode: multiply;
■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■

■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■
スクリーン
mix-blend-mode: screen;
■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■

■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■
オーバーレイ
mix-blend-mode: overlay;

焼き込み
mix-blend-mode: color-burn;
■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■

■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■
覆い焼き
mix-blend-mode: color-burn;
■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■

■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■
比較(暗)
mix-blend-mode: darken;
■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■

■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■
比較(明)
mix-blend-mode: lighten;
■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■

■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■
ハードライト
mix-blend-mode: hard-light;
■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■

■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■
ソフトライト
mix-blend-mode: soft-light;
■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■

■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■
差の絶対値
mix-blend-mode: difference;
■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■

■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■
除外
mix-blend-mode: exclusion ;
■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■

■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■
色相
mix-blend-mode: hue ;
■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■

■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■
彩度
mix-blend-mode: saturation ;
■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■

■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■
カラー
mix-blend-mode: color ;
■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■

■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■
輝度
mix-blend-mode: luminosity ;
■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■

■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■