mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる

  • 2017.10.09
  • css
mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる

こんばんは!taisonです。
ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗
気を取り直して更新していきたいと思います!

さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。

photoshopやillustratorでお馴染みのブレンドモードをcssで表現

皆さんphotoshopやillustratorを使ってデザインする時、ブレンド(描画)モードを使ってデザインすることありますよね?

例えばこんなのとか↓

iphone xモック
iphone xモック

ものっそい気持ち悪い色になってますけど、、、

実はコレ、cssでも実現可能ってご存知でしたか?

実際プロパティ自体は2年以上前に実装されているのですが、あまり使用されているのを見かけたことがないので、私を含め馴染みが少ない人も多いのではないでしょうか?

まぁ当時だとブラウザ対応状況もふまえて使用しにくいというのもありそうですが、、、

現在のブラウザ対応状況はこちら→
Blendingってやつです。

現在であればおおよその対応は可能なため、スマホメインで考えると使えるケースもありそうです。

では、実際に作ってみましょう。

mix-blend-modeの除外を使って透過っぽいデザインを作る

mix-blend-modeで出来ることは多いので、ひとまず一つに絞って検証してみたいと思います。
今回検証するのは、画面をスクロールして固定(fixed)してあるロゴが通った時に、ロゴの部分だけ背景の色を除外して色が変わるデザインを制作してみたいと思います。

言葉だとちょっと伝えづらい、、、 汗
と、とりあえずやってみましょう!

htmlとcssで下地を構築

まずは適当にHTMLファイルを用意して、そこにcssを反映させます。

blendtesthtml1

うーん、背景が寂しいですね(なんかアイルランド国旗みたいに、、)
一部に画像でもあてときましょう。

blendtesthtml2

次にロゴをsvgで用意します。

blendtesthtml3

※上記ロゴ色は、すでにmix-blend-modeを適用しているので青になってますが、実際指定している色は白です。

さて、下地準備はこれで完了。
実際に除外するcssを書いていきましょう。

mix-blend-mode exclusionを使い背景部分を切り取ったような感じにする

mix-blend-modeにexclusionという値があり、これを使うことで面白いことができます。

まずは設置したsvgまわりに、このcssを設定してみますね。


header{
	background: transparent;
	position: fixed;
	width: 100%;
	height: 66px;
	mix-blend-mode: exclusion; //コイツで除外
}
.logo{

	width: 60px;
	height: 66px;
	margin: 0 auto;
	background: url('logo.svg') 0 0;
	background-size: 100%;
}

こうすることでロゴと重なった部分の見栄えを変化させることができます。

codepenだと画像の入れ込みができないためgithubで失礼します↓
Git Hub上に置いてあります

設計考えてうまく設置したら目立ちそうですね!

mix-blend-modeで色々試して遊んでみましょう

サクッと紹介しましたが、このプロパティを使ってできることは、まだまだあります。

このブログでも使用シーンをふまえてちょこちょこと記事投稿していきますが、皆さんもぜひ試してみてください!

それではまた!

cssカテゴリの最新記事