Facebook Twitter RSS
ホーム ホームページ制作会社WEB企画 ウェブ企画ラボ HTML・CSS CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!!

CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!!

この記事のタイトルとURLをコピーする
CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!!
https://webkikaku.co.jp/blog/htmlcss/mix-blend-mode/
facebook twitter hatena Pocket

mix-blend-mode

ブラウザ対応状況に伴い、css3の「mix-blend-mode」を使い、テキストや画像にブレンドモードを適用しているサイトを多く見るようになってきました。
今回はその「mix-blend-mode」について使い方や実際の効果などをご紹介します。

ブレンドモードとは?

普段からPhotoshopなどのグラフィックツールを活用している方にとってはお馴染みのブレンドモードですが、知らない方のためにブレンドモードについて説明します。

ブレンドモードは描画モードとも言い、PhotoshopやIllustratorなどのAdobe系のソフトで、昔からある機能の1つです。

ブレンドモードでは要素と要素を重ねた時の表現を指定することができます。重なる部分のコントラストを強めたり、弱めたり、暗くしたり、明るくしたり色を反転させたりと様々な効果をブレンドできます。

ブレンドモード:「乗算」

例を出してみましょう。ブレンドモードの代表格「乗算」です。重なっている部分の背景色に影響を受け色がより濃く暗く表現さます。

例では「カラー(cssで指定した色)」に「画像」を重ねてみましたが、重ねるものは「画像」と「画像」でも「画像」と「テキスト」などでも効果は有効です。

ブレンドモード「乗算」のデモ

ブレンドモード:「スクリーン」

ブレンドモードの「スクリーン」は重なっている部分の背景色に影響を受けより明るく白く表現されます。「乗算」と逆の効果ですね。

ブレンドモード「スクリーン」のデモ

その他のブレンドモード一覧

この2つ以外にもブレンドモードの効果は多くあります。主なブレンドモードと実際どう見えるかをまとめましたので以下の図をご覧ください。

ブレンドモード一覧

正直使いどころがよく分からないモードもありますが…乗算、スクリーン、オーバーレイ、あたりはデザインをしていて出番が比較的多いです。

CSSでは再現が難しかったブレンドモード

乗算NG

しかし、ブレンドモードはcssでは実装ができず、Webデザインでは長年タブーとされてきました。私も駆け出しの頃は、「シャドウに乗算はかけるなよー」とよく先輩デザイナーに言われたものです。

しかし、このcss3「mix-blend-mode」の登場により表現が可能となりました。とてもステキなことです。

mix-blend-modeのブラウザのサポート状況

mix-blend-modeのブラウザのサポート状況

現在の「mix-blend-mode」の対応状況です。ieとedge以外は大丈夫そうです。(2019年5月現在)使用ブラウザの90%以上に対応していることになります。

スマホサイトのみの案件では使いやすそうですが、ie、edgeでは代替えデザインを用意するか通常でも影響しないデザインにする必要があります。

mix-blend-modeブラウザ対応状況

Photoshopとcssでブレンドモードの効果に違いが出るかを検証

cssでブレンドモードが使えるようになるのは嬉しいけど、Photoshopなどのツールと微妙に違いがあるんじゃないの?という疑問があったので、違いが出るかを検証してみました。

左側がPhotoshopでかけた乗算、右がcssのキャプチャ画像(Chorome:バージョン74)になります。

Photoshopとcssでのブレンドモードの違いを比較した図

結果は一目瞭然、cssでもPhotoshopと同じ効果が得られることが分かりました!!デザインをそのまま再現できるのは頼もしいです!!

cssのデモはこちらになりますので、御覧ください。

mix-blend-modeの使い方

mix-blend-modeの基本的な使い方をご紹介します。機能的にレイヤーが重なっていることが前提ですので、position:absoluteなどで要素を重ねて配置し、上のレイヤーにmix-blend-modeを適用します。

<div class="wrap">
  <img src="https://webkikaku.co.jp/blog/wp-content/themes/newwk/images/entryimg/kodomosyokudou_syokuji_kids.png" width="400" />
  <div class="color"></div>
  <div class="text">おいしい食卓</div>
</div>

.wrap{
  position: relative;

  text-align: center;
  background: #eeee66;
  padding: 50px;
}

.color {
  /* 位置を設定 */
  position: absolute;
  top: 80px;
  left: 50%;

  /* ミックスブレンドモード 乗算 */
  mix-blend-mode: multiply;

  background: #ff77bb;
  width: 200px;
  height: 100px;
}

.text {
  /* 位置を設定 */
  position: absolute;
  top: 270px;
  left: 0;
  right: 0;

  /* ミックスブレンドモード:オーバーレイ */
  mix-blend-mode: overlay;
  
  font-weight: bold;
  font-size: 60px;
}

デモはこちらになります。

ブレンドモードを使用したデザイン事例

最後にブレンドモードを使用したサイトを紹介します。サイト全体に使うというより、ピンポイントでmix-blend-modeを使用して、さりげない効果を出しているサイトが多く見られました。

Spintank

Spintank

メインビジュアルのテキストに「mix-blend-mode:exclusion」を使用しています。

exclusionは「除外」で、背景色と色が反転する効果があります。テキストの後ろが黒だと白色に黄色だと青色にテキスト色が変わります。

Spintank

EYELINER | UZU by FLOWFUSHI

EYELINER | UZU by FLOWFUSHI

メインビジュアル下部にあるテキストSVGに「mix-blend-mode:difference」を使用しています。

differenceは「差の絶対値」で、先程の除外と似た明暗・色相反転の効果があります。スクロールすることで文字と背景がそれぞれ動くことで面白い表現になっています。

EYELINER | UZU by FLOWFUSHI

フリーダム・マガジン

フリーダム・マガジン

サイトの写真部分にマウスオーバーをすると「mix-blend-mode: color-burn;」と「mix-blend-mode: hard-light;」を使用した焼き込み写真風の表現に変わります。

mix-blend-modeをhoverに入れるのはナイスアイディアですね。変化が面白く何度も試したくなります。

フリーダム・マガジン

DIRECTIONS, Inc.

DIRECTIONS, Inc.

最後に少し変わった使い方をご紹介。マウスのポインターに「mix-blend-mode:exclusion」を使用しています。クリックできる場所になると円が広がるアニメーションは分かりやすくていいですね。

どのサイトも画像の補正・効果として使うだけでなく、スクロールやホバーとあわせてアニメーションさせることでその変化を楽しむものになっていたのが印象的でした。

DIRECTIONS, Inc.

Webデザインの表現の幅が広がる可能性を秘めている「mix-blend-mode」

実用例を見ると分かるように、mix-blend-modeはデザイナー・コーダーの助けになるだけでなく、新たなWebデザイン表現として活躍できる可能性を秘めていると感じました。

早くie、edge対応が進みデスクトップ環境でも大手をふって使えるようになってほしいものです。

この記事のタイトルとURLをコピーする
CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!!
https://webkikaku.co.jp/blog/htmlcss/mix-blend-mode/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ