固定ヘッダーにmix-blend-modeを使うときの3つの注意点

固定ヘッダーにmix-blend-modeを使うときの3つの注意点 HTML / CSS
この記事は約6分で読めます。

どうも上かるびです。

案件でmix-blend-modeを使ったのですが、わりと時間を溶かした&参考記事があまりなかったので共有しておきます。

スポンサードサーチ

デモ:固定ヘッダーのmix-blend-mode

ヘッダーは透過。ロゴとハンバーガーメニューをmix-blend-mode(プロパティは反転のdifference)かけたい、という想定です。

 

とりあえずデモをご覧ください。(デザインや画像などは簡単に済ませました)

DEMO

デモで使用したコード

続いて解説、といきたいところですが、

「こちとら急いでるんや!いいからコードだけコピペさせてくれ!」という方もいると思いますので、まずはデモのコードを載せておきます。

上かるび
上かるび

必要最低限部分に書き直しています。

HTML

※jQuery ver.3.6 .0をheadで読み込んでいます。適宜削除お願いします。

※パスやアセットなども適宜変更してください。

CSS

※レスポンシブ処理はほとんどしていません。

※reset,normalizeなどは最低限しかかけておりません。

※ブラウザ対応は下記で出力されております。
last 2 version/IE 11/Firefox ESR/> 1% in JP/not dead

JavaScript

※Babelをかけて圧縮済みです。(コピペの際はコードをホバーすると出てくる< >のマークを押すとCtrl + Aで全選択できるようになります。

※挙動として、スマホとタブレットではスムーススクロールを適用しないようにしています。

mix-blend-modeとは?

簡単にいうと要素と要素が重なったときの色を混ざり方をCSS で指定できるというものです。

 

今回はdifferenceのプロパティを使用しましたが、イラレやフォトショでお馴染みのスクリーンや乗算なども指定できます。

 

上かるび
上かるび

基本的には動かない要素同士を組み合わせることがほとんどだと思います。

その他、詳しい解説はICSさんのサイトの記事を参考にするとよいかと思います。

スポンサードサーチ

固定ヘッダーにmix-blend-modeを使うときの3つの注意点

デザイナーさんから提示された参考サイトを見たときは「こんなん余裕っしょ」と高を括っていましたが、いざ実装しようとしたら半日くらいかかってしまいました…。

 

具体的な注意点は以下3つです。

①ヘッダーをposition:fixedする場合、コンテンツ部分もfixedする。(スタックコンテキストを揃える

②ヘッダーに入っている要素は表示させたい色を反転した色を指定する。

③ヘッダーの子要素に画像を使用する際はSVG形式、fillで色を指定してあるものを使用する。

 

詳しく解説します。

①ヘッダーをposition:fixedする場合、コンテンツ部分もfixedする(スタックコンテキストを揃える

今回は固定ヘッダーをposition:fixedを使って実装する場合を想定します。

 

まず注意したいのが、「mix-blend-modeは同じスタックコンテキストにある要素(子要素)に対して適用される」ということです。

今までスタックコンテキストを曖昧にしたままやってきた私はここで大きく躓きました。

 

「スタックコンテキストって何?」という方はこちらの記事を参照ください。

 

とりあえず行き着いた答えは、「headerにposition:fixedをかけてあるからその兄弟要素となるコンテンツ要素にもposition:fixedをかければいいんじゃね?」ということ。

 

ただコンテンツにもfixedをかけてしまうと、当然スクロールできなくなります。

なので、JavaScriptの慣性スクロールを使ってメインコンテンツ部分にfixedをかけちゃおうと思いつきました。

今回は自分のストックの中から慣性スクロールの部分のみ使用していけました。

 

実装したことがない方はライブラリを使用するのをおすすめします!

有名どころだとluxy.jsですね。

②ヘッダーに入っている要素は表示させたい色を反転した色を指定する

ヘッダーにbackground-color:transparentを指定して透過させているのですが、同様にmix-blend-modeもかかっているので、ヘッダー子要素には反転した色を指定する必要があります。

イラレやフォトショでも反転色を割り出す事ができるそうですが、Webツールを使うのもおすすめです。

 

③ヘッダーの子要素に画像を使用する際はSVG形式、fillで色を指定してあるものを使用する。

ここも結構つまずいたポイントです。

アウトライン化されたSVGをそのまま使ったらmix-blend-modeが効きませんでした。

そのSVGファイルをHTML上で見ると、fillのプロパティがなかったので、試しにつけてみたらうまく動作しました。

 

つまりSVG要素には色が指定されている必要があります。同時にヘッダーの子要素になるので、ここも反転色を使う必要があります。

ネコーダー
ネコーダー

複雑な色を使った画像だと実装は難しいかも…。

Web制作ではイラレのデザインカンプは少数派だと思いますが、今の会社はすべてイラレ…。

SVG出力の際、こちらの記事を参考にさせていただきました。

参考サイト

 

mix-blend-modeとスタックコンテキスト
CSSのmix-blend-modeを使うと、重なり合った要素同士の色の合成方法を設定できます。これによりPhotoshopなどのグラフィックツールにあるブレンド機能と同じような効果を実現できます。

 

君は真に理解しているか?z-indexとスタッキングコンテキストの関係
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト(Stacking Context)はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコ...

 

https://lopan.jp/about-svg/

 

コメント

タイトルとURLをコピーしました