新しめのCSSプロパティ「mix-blend-mode」

ykrmaru

はじめまして。ykrmaruです。

フロントエンドエンジニアをやってますが、情報のキャッチアップが最近あまりできてなく、他の方の記事など読んでみようと思いnoteを始めることにしました。よろしくお願いします。

noteは自分の備忘録的に使うことも想定してるので、全然最新じゃないこともつらつら書いてしまうと思いますが、ご了承ください。

ところで、4月から新アニメが色々とスタートしてますが、私が一番気に入ったのがこちら。

Vivy -Fluorite Eye’s Song-というアニメです。

アニメの詳細は公式サイトなどを御覧いただきたいのですが、このサイトのグロナビエリア（PC表示の右のハンバーガーメニューのところ）の見た目が気になりました。（※左上のロゴ部分も同じですね）

背景色に連動してPNG画像の文字色が変化してる。シームレスに変化するのが気持ちいいっ！

どうやってんのかなーJS？？と思って調べてみたら、mix-blend-modeというCSSプロパティが使われてました。

これ、そういえば使用の提案されたけど「IE対応してないから無理ー」で使ったことなかったやつ！

VivyのサイトはIE用に別でなにかやってるっぽいのですが、詳しくはわからず。（わかったら追記します）

一応↑のようなやり方も出てきました。

2021年8月でMicrosoft365のIEサポートが終了するので、IEを切り捨て始めたところが増えましたね。

IE除外になれば、新しいCSSプロパティ色々使えるようになって、JS使わなくても色々表現できるようになるので、一気にフロントエンドの世界が明るくなりそうな予感がしてます。

早くIEを気にしなくていい開発やりたいですねー

-----

2021年6月24日追記

実際に仕事でmix-blend-modeを使う機会があったので、IEに対応させるポリフィルとかあるのか、色々調べました。

なかった！！！！！

なかったよぉぉぉ・・・

で、考えたのは、対象の透過させたい文字が白文字だったので、text-shadowを使う方法でした。

そして、IEハックでIEのみに適用させてみた。

.l-header {
 mix-blend-mode: exclusion;

 &__inner {
   h1 {
     font-size: 22px;
     color: $white;

     @media all and (-ms-high-contrast: none) {
       text-shadow: 1px 1px 3px rgba($color: #000000, $alpha: 0.7);
     }
   }
 }
}

こうするしかなかったですね。

他に妙案を思いついた方がいらっしゃれば教えて下さい。

IE11の命が来年の6月までになったので、IEに苦しめられるのもあと少しですね。

Webエンジニアのみなさん、あと一踏ん張り頑張りましょう！

この記事が気に入ったらサポートをしてみませんか？