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

HTML・CSS 最終更新日:2021/06/23 公開日:2019/05/22

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以外は大丈夫そうです。(2021年6月現在)使用ブラウザの90%以上に対応していることになります。

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

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://wk-partners.co.jp/homepage/wp-content/old-uploads/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デザイン表現として活躍できる可能性を秘めていると感じました。

ほとんどのブラウザに対応している今、是非利用してみたいデザインテクニックですね!

CONTACT

Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

オフィス一覧へ

受付時間|9:00~18:00(土・日・祝除く)

※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

※全国対応

ホームページ無料診断 毎月10社限定

ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

無料診断する