クールな見出しが作れる！CSSで文字と背景を２色に色分けする方法

今回はCSSの「mix-blend-mode」プロパティを使用し背景と文字を２色に色分けする方法を紹介します。

白黒2色で色分けすることでコントラスト強めのクールなデザインに。男性向けページの見出しなどにおすすめです。

mix-blend-modeとは

親要素や背景を重ねたときの見え方を指定するプロパティです。

上記をmix-blend-mode:overlay;で重ね合わせると以下のようになります。

元々はPhotoshopやillustratorなどの画像ソフトに搭載されていた機能となります。レイヤを重ねてエフェクトをかけてものがCSSでも設定が可能となりました。

mix-blend-modeに指定できる値はoverlayを含め以下となります。

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

「mix-blend-mode」に「difference」を指定し2色に分割

mix-blend-modeについては以下の記事を参考にしてください。

http://it-ti.work/mix-blend-mode/

p {
    position: relative;
    font-size:60px;
    color: black;
    background: white;
}

p:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    mix-blend-mode: difference;
}

Pタグの文字カラーを黒、背景を白に設定します。

before疑似要素で高さを50%にして背景を白にした状態で「mix-blend」に「difference」を指定すると中央で２色に分割されます。

全てのHTML、CSSコード

<div class="pic-container pic-background">
    <h1>GAME OVER</h1>
</div>

.pic-background{
 background-image: url(data:image/jpeg;base64,...);
 background-size: cover;
}

.pic-container {
    position: relative;
    display: flex;
    width: 600px;
    height: 338px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 0;
}

.pic-container:after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    z-index: -1;
}

h1 {
    position: relative;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    font-size: 60px;
    color: black;
    background: white;
    box-shadow: 0 0 8rem #fff;
    font-family: anton;
}

h1:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    mix-blend-mode: difference;
}

フレックスボックスを使用し文字を中央寄せにしています。

.pic-container:after疑似要素内で黒背景をオーバーレイさせ、box-shadowで文字周りを白くぼかしています。

このWEBパーツは以下より使用可能です。

文字と背景を半分だけ違う色にしたテンプレ