mix-blend-modeで2色で色分けする

Pocket

今回は「mix-blend-mode」を使用し背景と文字を2色に分割したテンプレートを作成しました。

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

白黒2色で色分けすることでコントラスト強めのクールなデザインにしています。

男性に向けた記事のアイキャッチ画像などに活用してくだいね。

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

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

CSSの「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」を指定すると中央で2色に分割されます。

全ての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で文字周りを白くぼかしています。

 

今回作成したテンプレートは以下より使用可能です。

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

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です