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

がんばろう

リースエンタープライズ レジェンズ
著者.
リースエンタープライズ レジェンズ
社名.
株式会社リースエンタープライズ
URL.
https://wreath-ent.co.jp/
Facebook.
https://www.facebook.com/wreathenterprise/
Twitter.
https://twitter.com/wreathofficial
Instagram.
https://www.instagram.com/wreath_enterprise/

リースエンタープライズを創業時期から現在まで中心となって支えてきた人たちが残したブログやクリエイティブ作品、そして日々学んだデザインやマーケティングなどに関する教養をまとめています。