【コピペで使用OK!】HTML&CSSで動画を文字のかたちに切り抜く方法(mix-blend-mode: screen)

【コピペで使用OK!】HTML&CSSで動画を文字のかたちに切り抜く方法(mix-blend-mode: screen)
misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、HTMLとCSSで動画を文字の形に切り抜く方法をご紹介します。

一見難しそうに見えますが、JavaScriptや複雑なコードは不要です。

この方法を使えば、シンプルかつおしゃれな演出を手軽に実現できます。
ぜひ、みなさんも取り入れてみてくださいね^^

Contents

完成イメージ

文字の部分だけが動画で表示されます。ファーストビューやインパクトのあるデザインに最適です。

misa

今回はこのようなデザインを実装してみます。

Design

ソースコード

HTML
<div class="container">
  <video src="video.mp4" autoplay muted loop></video>
  <h1>Design</h1>
</div>
CSS
.container {
  position: relative;
  width: 100%;
  height:600px;
  overflow: hidden;
}

.container video,
.container h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container video {
  object-fit: cover;
}

.container h1 {
  background: #fff;
  font-size: clamp(60px, 12vw, 240px); /* 画面サイズに応じて文字サイズを調整 */
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-align: center;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen; /* 文字部分だけを透過し、動画を表示 */
}
mix-blend-modeの解説

mix-blend-modeは、要素が重なっているときの色の混ざり方を指定できる機能です。

screenブレンドモードは、画像編集ソフトでいう「スクリーン」と同じ効果で、背景と要素の色を反転して掛け合わせます。明るい部分が強調される効果になります。

カスタマイズ例

misa

背景がうっすらと見えるようにカスタマイズしてみました♩

Design

CSS
.container {
  position: relative;
  width: 100%;
  height:600px;
  overflow: hidden;
}

.container video,
.container h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container video {
  object-fit: cover;
}

.container h1 {
  background: #fff;
  font-size: clamp(60px, 12vw, 240px);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-align: center;
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  background-color: #d7d7d7;
}

    background-color: #d7d7d7;を追加
    背景に淡いグレーを指定することで、動画がうっすらと見えます。

    まとめ

    今回は、HTMLとCSSだけで動画を文字の形に切り抜く方法について解説しました。

    簡単に実装できるのでぜひみなさんもアレンジして、オリジナルのデザインを作ってみてくださいね。

    では、また~✨

    ABOUT ME

    現役インハウスWebデザイナー。
    35歳、2児の母。
    今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

    Contents