こんにちは！
TANE-beエンジニアです。

さて、2022年6月にいよいよInternet Explorerのサポートが終了します。
日本国内では馴染み深くシェアを維持してきたIEですが気がつけばサポート終了まで1年を切っています。

すでに対応していない制作会社もあるかと思いますが、サポートが切れるまでは対応ブラウザにしているところも、まだまだ多かったのではないでしょうか？

IEを切ることで対応できるCSSはたくさんあります！
今回は、デザイン面にもおおきく変わってくる「filter」「mix-blend-mode」と2つのプロパティをご紹介します。

画像の色が簡単に変更できる「filter」プロパティ！

バナーやメインビジュアルなど、サイトの印象に大きな役割を果たすものの一つが画像です。
IEのサポートが終了すると、今まではCSSでは実装できなかった「ぼかし」や「色調変換」が行えるようになります。

• ぼかし（blur）
• モノクロ（grayscale）
• セピア（sepia）
• 明度（brightness）
• 彩度（saturate）
• コントラスト（contrast）

HTML

<div class="box">
<p class="el_head01">ぼかし（blur） 3px</p>
<div class="el_box01_item_img is-blur"><img src="../../img/2021/img_dummy.jpg" alt=""></div>
</div>
<div class="box">
<p class="el_head01">モノクロ（grayscale） 100%</p>
<div class="el_box01_item_img is-grayscale"><img src="../../img/2021/img_dummy.jpg" alt=""></div>
</div>
<div class="box">
<p class="el_head01">セピア（sepia）100%</p>
<div class="el_box01_item_img is-sepia"><img src="../../img/2021/img_dummy.jpg" alt=""></div>
</div>
<div class="box">
<p class="el_head01">コントラスト 150%<br>+<br>セピア 50%</p>
<div class="el_box01_item_img is-mix01"><img src="../../img/2021/img_dummy.jpg" alt=""></div>
</div>

CSS

//　ぼかし
.is-blur { filter: blur(3px); } 

//　モノクロ（グレースケール）
.is-grayscale { filter: grayscale(100%); }

//　セピア
.is-sepia { filter: sepia(100%);

//　コントラスト＋セピア
.is-mix01 {filter: contrast(150%) sepia(50%);}

上記では一部要素しか記載しておりませんが、デモページにもその他使用例記載しております。

ほかにも色調反転や諧調反転などもできますが、サイトの印象を大きく損なうことなく、コーポレートやブランディングサイトに使いやすいのは上記あたりかなと思います。

個人的には、色味を落とした画像（モノクロ、セピア、彩度50％など）を鮮やかに変化させるとサイトを華やかな印象にできて良いなと思いました！

また画像の上にフィルターを載せるようなbackdrop-filterというプロパティもありますが、
残念ながらこちらはFirefoxも未対応なようです…
こちらもコーポレートなどでも使いやすそうなので、簡単に実装できるようになる日が待ち遠しいですね。

乗算やハイライトが使える「mix-blend-mode」プロパティ！

サイトのヘッダーなどで目にする機会が多くなってきたmix-blend-modeですが
こちらもIEは対応していませんでした。
スタイルをあてると、下の要素に対して乗算やハイライトといった効果を実装することができます。

CSS

// 乗算
.is-multiply { mix-blend-mode: multiply; }

// スクリーン
.is-screen { mix-blend-mode: screen; }

// オーバーレイ
.is-overlay { mix-blend-mode: overlay; }

背景の要素から大きく影響を受けるので、「読ませるため」ではなく「印象を変えるため」に使用すると良いですね。
実装コストは少ないですが、見る人にとっては新しくて手の込んだ印象を与えることができそうです。

画像の上で文字をスライドさせたり、上部に固定したヘッダーにスタイルを当てたりすると動くたびに自動で色味が変わるのがおしゃれだと思いました！
また画像の上に装飾としての文字をおいたりロゴをうっすら重ねたりと、結構使い道は広そう。

ちなみに、背景画像(background)にスタイルを当てる場合はbackground-blend-modeというプロパティが使用できます。
mix-blend-modeとほとんど同じ効果が得られます。

小さな範囲からいろいろと実装してみてはいかがでしょうか？

まとめ

さて、今回はデザイン面で大きく影響があるプロパティを2つご紹介しました！
どちらもCSS1つで実装できるので、ちょっと試してみるのも手軽なのが嬉しいですね。

次回は、「clip-path」とそれを使用したアニメーションをご紹介します。
どうぞお楽しみに！