CSSブレンドモードで文字にオーバーレイエフェクトをかける

はじめに

今日はCSSブレンドモードで文字にオーバーレイエフェクトをかける方法をご紹介します。

そもそもブレンドモードとかなんなのか、そのブレンドモードを使うときの文法、そした最後に実際に文字にCSSのブレンドモードを使って文字にオーバーレイのエフェクトをかけて終わりたいと思います。

ちなみに、前回の記事ではCSSの文字に影を text-shadow の使い方とtext-shadow を使うことによってどういったことができるのかをご紹介しました。

気になる方はこちらからどうぞ。

CSSのtext-shadowを徹底解説

CSSブレンドモードで何ができるか

まず、CSSブレンドモードで何ができるかを簡単にご紹介します。

PhotoshopやSketch, Illustratorなどを使っている方はイメージしやすいかもしれませんが、描画モードで画像と色をオーバーレイして合成したり、グラデーションと画像を重ねて合成したりできます。

例えば、こちらの２つの画像をブレンドしていきたいと思います。

そうすると、ブレンドのモード（描画モード）にもよりますが、ソフトライトにすると、このようになります。

ブレンドモードの文法

例

div {
    mix-blend-mode: soft-light;
}

このように、 mix-blend-mode というプロパティに値を入れることでdiv自体がsoft-lightの描画モードになります。

mix-blend-mode が持てる値は合計16個あります。
中でもよく使うオススメのものはハイライトしてあるので、ぜひご覧ください。

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• normal
• overlay
• saturation
• screen
• soft-light

また、mix-blend-modeと似たプロパティでbackground-blend-modeがあります。

こちらの２つの違いに関しては、こちらの記事でご紹介しています。

使い方と使う場面に違いがあるので、お気をつけください。

文字にオーバーレイをかけてみる

それでは、実際に文字にオーバーレイをかけてみましょう。

オーバーレイというと画像と色、もしくは画像とグラデーションを想像する方が多いと思いますが、実は文字にかけることで、ポスターのようなおしゃれなタイポグラフィを作ることができます。

例1

See the Pen BLEND_MODESを使う1 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

h1 {
  font-size: 8vw;
  font-weight: bold;
  color: rgba(0, 0, 200, 0.7);
}
h1::before {
  position: absolute;
  z-index: 5;
  left: -10px;
  top: 0;
  content: attr(text);
  color:rgba(200,0,0,.7);
  mix-blend-mode: multiply;
}
h1::after {
  position: absolute;
  z-index: 5;
  left: 10px;
  top: 0;
  content: attr(text);
  color:rgba(0,200,0,.7);
  mix-blend-mode: multiply;
}

解説

擬似要素のcontent: attr(text);でh1タグの属性で入れているtext="BLEND-MODESを使う"の中身を取ってきて、擬似要素のcontentとして入れています。

あとは、positionプロパティ、topプロパティ, leftプロパティでいちを調整して、colorプロパティで色を設定、そして最後にmix-blend-modeでブレンドモードを設定しています。

例2

See the Pen BLEND_MODESを使う2 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

h1 {
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 10vw;
font-weight: bold;
}
h1 span {
  mix-blend-mode: multiply;
  margin: 0 -15px;
}
span:nth-of-type(1) {
  color: rgba(#AB1795, 0.75);  //scssで書いているので、このような書き方でも効きます
}
/*あとはそれぞれの色を設定していく*/

解説

それぞれの文字に色とmix-blend-modeを設定し、少しかぶるようにマージンを調整するだけです。

全ての文字に色をかけてもOKですが、あえて黒の部分を少し残しておくとメリハリがつきます。

例3

See the Pen BLEND_MODESを使う3 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

h1 {
font-size: 8vw;
font-weight: bold;
color: rgba(0, 0, 200, 0.5);
}
h1::before {
position: absolute;
z-index: 5;
left: 0;
top: 0;
content: attr(text);
color:rgba(200,0,0,.5);
mix-blend-mode: soften;
height: 0.9em;
overflow: hidden;
}
h1::after {
position: absolute;
z-index: 5;
height: 0.6em;
overflow: hidden;
left: 0;
top: 0;
content: attr(text);
color:rgba(0,200,0,.5);
mix-blend-mode: soften;
}

解説

擬似要素にheightを設定することで、文字の上、真ん中、下で色を変更しています。

text型に画像を切り抜いて、そちらと重ねても面白いエフェクトができるかもしれません。

例4

最後は文字ではなく、背景画像をブレンドしました。

See the Pen BLEND_MODESを使う4 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

body{
   background: url("画像へのパス") rgba(0,0,0,0.4) no-repeat fixed center; 
background-blend-mode: multiply;
}

解説

backgroundに値を２つ設定して、background-blend-modeをかけています。
もちろん、background-image, background-color とプロパティを２つに分けてもOKです。

まとめ

以上、CSSブレンドモードで文字にオーバーレイエフェクトをかけるときの文法とサンプルをいくつかご紹介しました。

CSSグリッドが普及するにつれ、Webでも紙っぽいデザインができないか非常に注目が集まっていますが、ブレンドモードも紙っぽいデザインを作るうえで活躍してくれそうなものなので、ぜひ試してみてください。