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

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

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

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

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

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

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

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

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

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

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

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

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業界もデザインの幅やクオリティが上がってきて、より一層デザイン競争が激化してきてますね。

がんばろう