CSSの「mix-blend-mode」で画像と文字をブレンドさせてみた

Pocket

今回作成したテンプレではCSSの「mix-blend-mode」を使用し、文字にオーバーレイエフェクトをかけて背景画像とブレンドさせました。

背景画像を文字に重ね合わせたテンプレ

背景画像に文字をオーバーレイさせることで幻想的でインパクトのある装飾となります。

目を引くアイキャッチ画像にしたい場合などにおすすめのテンプレです。

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とtext-shadowを使った重ね合わせ

mix-blend-mode: overlay;
text-shadow: 0px 8px 9px #511D0E, 0px -2px 1px #fff;

「mix-blend-mode」に「overlay」を指定し、「text-shadow」で文字の上に白、下に黒系のカラーで影を作ることで文字が浮き出すエフェクトをかけました。

上記のように「mix-blend-mode」は画像と重ね合わせるだけで簡単に目を引くおしゃれなデザインに仕上げることができるのがいいですよね。

全てのHTML・CSSコード

<div class="pic-container pic-background">
    <div class="box">
        <p>I do not seek, I find.</p>
    </div>
</div>

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

.pic-container {
    width: 600px;
    height: 338px;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    font-family: anton;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.3);
}

.box p {
    font-size: 70px;
    mix-blend-mode: overlay;
    text-shadow: 0px 8px 9px #511D0E, 0px -2px 1px #fff;

}

フォントはGoogleフォントの「anton」を使用しています。

また「.box」セレクタの「background-color」を黒で透過し、画像の上に重ねて文字を見やすくしています。

今回のテンプレートは以下より使用できます。

背景画像を文字に重ね合わせたテンプレ

CSSの編集も可能なので様々なブレンドパターンを試してみてくださいね。

Pocket