2018年4月24日

デザイン

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

目次

  1. はじめに
  2. CSSブレンドモードで何ができるか
  3. ブレンドモードの文法
  4. 文字にオーバーレイをかけてみる
  5. まとめ

はじめに

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

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

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

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

CSSのtext-shadowを徹底解説

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

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

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

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

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

ブレンドモードの文法

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があります。

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

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

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

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

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

例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に値を2つ設定して、background-blend-modeをかけています。
もちろん、background-image, background-color とプロパティを2つに分けてもOKです。

まとめ

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP