Blog

ブログ

mix-blend-modeを使ってCSSでオーバーレイ等描画モードを指定しよう

最終更新日:|公開日:

mix-blend-modeを使ってCSSでオーバーレイ等描画モードを指定しよう

こんにちは、チーフデザイナーの塩谷です。

本日は新しいCSS3プロパティ「mix-blend-mode」の使い方をご紹介いたします。

デザイナーが気軽にいつも使用している「オーバーレイ」「乗算」「比較(明・暗)」などの描画モードがCSSで設定できるようになったんです。

これがCSSで表現できるようになることで、これまで画像で対応していた部分をテキストで対応出来たりして、SEO的にも管理的にも良さ気です。

残念ながらIEは未対応ですが、もはやIE対応はこの時代いらないでしょう、無視無視。
Windows10にアップデートして、せめてEDGEを使いましょう。

ブレンドモードの基本と使い方

さて、このmix-blend-modeの挙動ですが、基本的にはPhotoshopに準しているようです。

そもそもブレンドモードとは、重なるレイヤーのオブジェクトをどのように表示させるのかを指定する機能です。

mix-blend-modeを使ってCSSでオーバーレイ等描画モードを指定しよう_01

画像のように2枚の写真を重ねた時、ブランドモードを指定することで様々な描画表現が可能になります。

mix-blend-modeを使ってCSSでオーバーレイ等描画モードを指定しよう_02

Adobe製品であるPhotoshop・Illustrator・After Effect等では昔から存在する機能で、とても便利!もうデザイナーは当たり前のようにバンバン使用してますよね。

mix-blend-modeで指定できる描画モード

mix-blend-mode
通常normal
乗算multiply
オーバーレイoverlay
ソフトライトsoft-light
ハードライトhard-light
比較(暗)darken
比較(明)lighten
焼き込みcolor-burn
覆い焼きcolor-dodge
差の絶対値difference
除外exclusion
色相hue
彩度saturation
カラーcolor
輝度luminosity

 

mix-blend-modeの指定方法

mix-blend-mode:overlay;

これだけです。とっても簡単。
それでは、使用例を見てみましょう!

mix-blend-modeの使用サンプル

サンプルを見る

・HTML

<div class="blend-sample">
  <div class="blend-back">
    <img src="">
  </div>
  <div class="blend-front">
    <p>
      SAMPLE TEXT
    </p>
  </div>
</div>

・CSS

/*これは適宜変えてね*/
.blend-sample {
  width:100%;
  position:relative;
  height:100vh;
  overflow:hidden;
}

/*背景画像*/
.blend-back img {
width:60%;
height:auto;
}

/*ブレンドモードを指定したテキスト*/
.blend-front {
  mix-blend-mode: overlay;
  position:absolute;
  top:100px;
  left:50%;
  width:80%;
  margin:0 0 0 -40%;
  font-family: 'Oswald', sans-serif;
  font-size:20vw;
  text-align:center;
}

使い方はとても簡単ですね!

今回はあえて画像との境目で描画モードが変わるのを確認してもらうために背景画像を60%にしていますが、100%に変えれば画面一杯になりますよ。

画像でやりましたが、動画の上にmix-blend-modeを指定したテキストを配置しても、かなりカッコイイですよね!

デザイナーがCSSのみで描画モードが指定できるようになって、さらにデザインの幅が広がります!

最近、WEB業界もデザインの幅やクオリティが上がってきて、より一層デザイン競争が激化してきてますね。

がんばろう

ブログ編集部
ライター:

ブログ編集部

所属:元、株式会社リースエンタープライズ
役職:前チーフデザイナー、前マーケティングマネージャーなど多数
氏名:ブログ編集部 / 旧所属スタッフ
当社、リースエンタープライズを創業時期から現在まで中心となって支えてきた人たちが残したブログやクリエイティブ作品、そして日々学んだデザインやマーケティングなどに関する教養をまとめています。 現在、フリーランス、大手制作会社、大手アニメーション制作会社などへ羽ばたいた多くのスタッフに敬意と発展を祈願して当社のブログ編集部として掲載しています。
見積りシミュレーション オンライン打ち合わせ