株式会社リースエンタープライズ 大阪南森町発、最強のホームページ制作集団

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

がんばろう

新着記事と笑いは鮮度が命や!

「mix-blend-modeを使ってCSSでオーバーレイ等描画モードを指定しよう」記事が気に入った方はいいねしよう!!