今回はcssのmix-blend-modeについてご紹介します。
mix-blend-modeは背景と要素のブレンド方法を指定するプロパティです。
Photoshopでいうところのレイヤーの描画モードで、色の組み合わせの表現はまさに無限大…！
付与することで様々な表現方法が可能です。
そんなmix-blend-modeをサンプルを交えて解説するのでぜひ最後までご覧ください。
CONTENTS
デモ
まずはデモをご覧ください。
mix-blend-mode作成のための基本実装
まずは基本実装です。
html
<div class="img">
<div class="container mix-blend-mode-0">
<div class="title">CONNECRE</div>
<div class="description">MAKE IT SIMPLE, BUT SIGNIFICANT.</div>
</div>
</div>
css
.img {
width: 100% ;
height: 30vh ;
background: url("assets/img/img-12.jpg") no-repeat center center / cover;
display: flex ;
justify-content: center ;
align-items: center ;
}
.container {
}
.title, .description {
color: #00A0F0 ;
font-size: 5rem ;
line-height: 5rem ;
text-align: center ;
font-family: 'Bebas Neue', cursive;
}
.description {
color: #CCC ;
font-size: 1.5rem ;
line-height: 1.5rem ;
}
.mix-blend-mode-0 {
mix-blend-mode: normal;
}
各ブレンドモードの解説
それでは各ブレンドモードを見ていきましょう。
乗算
基本色と合成色を掛け合わせるため暗くなる。
合成色が黒の場合は黒、白の場合は変更はない。
.mix-blend-mode-1 {
mix-blend-mode: multiply;
}
スクリーン
基本色を反転した状態で合成色を掛け合わせるため明るくなる。
合成色が黒の場合は変更されず、白の場合は白となる。
.mix-blend-mode-2 {
mix-blend-mode: screen;
}
オーバーレイ
明るい部分はスクリーン、暗い部分は乗算の効果が得られる。
明るい部分はより明るく、暗い部分はより暗くなるためコントラストが上がる。
.mix-blend-mode-3 {
mix-blend-mode: overlay;
}
比較（暗）
基本色と合成色を比較して暗い方の色を合成する。
.mix-blend-mode-4 {
mix-blend-mode: darken;
}
比較（明）
基本色と合成色を比較して明るい方の色を合成する。
.mix-blend-mode-5 {
mix-blend-mode: lighten;
}
覆い焼き
基本色を明るくして合成色のコントラストを落とすため明るくなる。
合成色が黒の場合は変化はない 。
.mix-blend-mode-6 {
mix-blend-mode: color-dodge;
}
焼き込み
基本色を暗くして基本色と合成色のコントラストを強くする。
.mix-blend-mode-7 {
mix-blend-mode: color-burn;
}
ハードライト
明るい色を重ねるとスクリーンのように明るく、暗い色を重ねると乗算のように暗くなる。
.mix-blend-mode-8 {
mix-blend-mode: hard-light;
}
ソフトライト
明るい色を重ねると覆い焼きのように明るく、暗い色を重ねると焼き込みのように暗くなる。
.mix-blend-mode-9 {
mix-blend-mode: soft-light;
}
差の絶対値
合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除く。
白と合成すると基本色の値が反転しますが、黒と合成しても変化はない。
.mix-blend-mode-10 {
mix-blend-mode: difference;
}
除外
差の絶対値モードと似ているが、効果のコントラストはより低くなります。
白と合成すると基本色の値が反転するが、黒と合成しても変化はない。
.mix-blend-mode-11 {
mix-blend-mode: exclusion;
}
色相
基本色の輝度と彩度、および合成色の色相を持つ結果色を作成。
.mix-blend-mode-12 {
mix-blend-mode: hue;
}
彩度
基本色の輝度と色相および合成色の彩度を使用して結果色を作成。
.mix-blend-mode-13 {
mix-blend-mode: saturation;
}
カラー
基本色の輝度と合成色の色相および彩度を使用して結果色を作成。
.mix-blend-mode-14 {
mix-blend-mode: color;
}
輝度
基本色の色相および彩度と合成色の輝度を使用して結果色を作成。
.mix-blend-mode-15 {
mix-blend-mode: luminosity;
}
mix-blend-modeを応用！
mix-blend-modeを応用したデモを用意したのでご覧ください。
html
<div class="img">
<div class="container mix-blend-mode-6">
<div class="title">CONNECRE</div>
<div class="description">MAKE IT SIMPLE, BUT SIGNIFICANT.</div>
</div>
</div>
css
.img {
width: 100% ;
height: 100vh ;
background: url("assets/img/img-13.jpg") no-repeat center center / cover;
display: flex ;
justify-content: center ;
align-items: center ;
position: relative ;
}
.img::after {
content: "" ;
width: 100% ;
height: 100% ;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
mix-blend-mode: color-dodge ;
position: absolute ;
opacity: 0.8 ;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
color: #ddd ;
position: relative ;
z-index: 1 ;
}
.title, .description {
font-size: 5rem ;
line-height: 5rem ;
text-align: center ;
font-family: 'Bebas Neue', cursive;
}
.description {
font-size: 1.5rem ;
line-height: 1.5rem ;
}
.mix-blend-mode-6 {
mix-blend-mode: color-dodge;
}
ポイントは以下の通りです。
- 全画面背景画像（グレースケール）にグラデーションオーバーレイを重ねる
- グラデーションオーバーレイは加算させアニメーションで移動
- テキストも加算
- テキストカラーはグレー、白の加算は白くなるだけなのでグレーにして加算させると光って見える
最後に
デモはブレンドモードが分かりやすくなるよう中間色で設定しているため文字の視認性が悪いものもありますが、背景（基本色）とテキスト（合成色）の組み合わせは無限なのでぜひいろいろ試してください。
ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
個人サイトやTwitter、YouTubeにてPhotoshopとIllustratorの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 Adobe Illustrator iPad版 xコネクリ – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『デザインの仕事がもっとはかどるAdobe Firefly活用テクニック50』（インプレス）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。
