sawaですよろしくおねがいします😺
はじめに
去年の10月にYouTubeのUIがアップデートされるとの情報が発表され、ニュース記事でもチェックされた方は多いのではないでしょうか。
その中で自分が興味を抱いたものが「アンビエントモード」です。
動画内の色を背景色に反映させたものです。
わかりやすい例として下の図を作成しました。
画面下の黒い背景色に、画面上の写真の色がじわっと反映されています。
なんだかお洒落でいい感じの雰囲気になるので、これをブラウザでも実装していきたいと思います。
ちなみにYouTubeアプリでは動画内の色を動的に反映させているようなのですが、CSSのみではおそらく実現不可能なので静止画を用いて実装します。
今回はサンプルとして汎用的なカード型コンポーネントを実装していきたいと思います。
また、こちらは近年流行っている「グラスモーフィズム」とは別物なので、この記事の後半に違いをご説明します。
コード例
今回は下記の図のように要素を重ねていきます。
HTML
<div class="card">
<div class="card-img"></div>
<dl class="card-text">
<dt>Title</dt>
<dd>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic
voluptatibus autem itaque aperiam eos, ducimus, non provident quidem
neque fugit corrupti nam aliquid libero voluptates laudantium,
blanditiis rerum harum culpa.
</dd>
</dl>
</div>
HTMLはこのような感じです。
画像の表示に<img>タグを使っていない点に着目してください。
<img>タグの代わりに<div>タグを挿入し、CSSのbackground-imageプロパティでパスを設定します。
理由としては、今回はCSSの疑似要素で画像を複製する必要があるからです。その場合background-imageプロパティの方が画像を扱いやすいため、<div>タグを使った実装にしています。（この点については丁寧に紹介されている記事があったので参考にしてみてください）
CSS
.card {
position: relative;
overflow: hidden;
width: 360px;
height: 500px;
border-radius: 10px;
background-color: #000;
z-index: -10;
}
.card-img {
height: 300px;
width: 360px;
background-image: url("https://images.unsplash.com/photo-1498940757830-82f7813bf178?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80");
background-size: cover;
}
.card-img::after {
content: "";
display: block;
position: relative;
z-index: -1;
height: 100%;
width: 100%;
/*参照先の画像を複製
Duplicate referenced image*/
background-image: url("https://images.unsplash.com/photo-1498940757830-82f7813bf178?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80");
background-size: cover;
/*画像をぼかして下にずらす
Blur and shift the image down*/
filter: blur(20px);
transform: translateY(20px);
/*ブレンドモードの設定
Blend mode settings*/
mix-blend-mode: difference;
}
.card-text {
position: relative;
color: #fff;
padding: 16px;
line-height: 24px;
}
CSSは上記で全てです。
疑似要素を設定する上での注意点があるので後述します。
z-indexについて
疑似要素は何も指定していないと親要素の上に重なるため、ぼかした疑似要素が写真の下に来るようにz-indexでマイナスの値を指定します。
このとき、親要素にz-indexを指定すると疑似要素の上に重なってしまうため、親要素にはz-indexを設定しないでください。
それに伴い、背景色を指定している要素のz-indexが疑似要素よりも下に重なるようにマイナス値を設定してください。
画像をぼかしてずらす
filter: blur(20px);
transform: translateY(20px);
疑似要素で親と同じ画像を複製し、それをfilter: blur()でぼかします。
今回は画像下部の背景色にぼかしたものを重ねたいので、transform: translateY()を設定して疑似要素を下にずらすようにしています。
また、画像をぼかした分は親要素からはみでてしまうので、親要素にoverflow: hiddenを設定し、はみ出ている部分をカットしてください。
↓overflow: hiddenを設定せずぼかしが親要素からはみ出している例
グラスモーフィズムとの違い
（グラスモーフィズムについては弊社の過去記事を参考にしてね）
図で比較してみました。
今回の実装方法だと、大きな画像を用意しなくて済みます。
また、テキスト部分の背景色も透けないので可読性が保てます。
さらに、疑似要素のmix-blend-modeプロパティでぼかし部分の色の表現を変えることができます。
下図にいくつか例を挙げます。
mix-blend-modeで与える印象が変わってくるので、いくつか試してみることをお勧めします。
おわりに
今回はカード型で例を挙げましたが、いろんな箇所に適用していただけるかと思います。
疑似要素でちょっとひと手間加えて、ガンガンいい感じの雰囲気にしていきましょう！
最後にcodepenのリンクを貼っておきますので、こちらで触って色々試してみてください。
See the Pen Color seeping UI by sawa (@SawadaMoemi) on CodePen.