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; ■