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でも紙っぽいデザインができないか非常に注目が集まっていますが、ブレンドモードも紙っぽいデザインを作るうえで活躍してくれそうなものなので、ぜひ試してみてください。

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

1

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

CONTACT PAGE TOP