テキストのくり抜きmix-blend-mode: screen

2024.03.06

はじめに

概要

mix-blend-mode: screen;はCSSプロパティの一つで、HTML要素のブレンドモード（色の混合方法）を指定する際に使用します。screenはそのブレンドモードの一種で、背景となる色と混合してより明るい色を生成します。Photoshopやその他の画像編集ソフトウェアで見られる「スクリーン」ブレンドモードと同様の効果があります。今回はこちらのプロパティを使用し、テキストをくり抜き動画を表示させたいと思います。

目的

実装内容
コード
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

mix-blend-modeを使用すると、要素同士のブレンドが可能となり、デザインに新しい表現方法が加わります。画像やテキストを効果的に組み合わせることで、魅力的で創造性豊かなコンテンツを作成できます。

Port folio

コード

以下はテキストをくり抜いて、動画を描写するためのコードの一例です。GitHubからダウンロードした動画（フリー素材を使用）も利用できます。ダウンロードした動画は、コード内で使用されます。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- reset.css destyle -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="style.css">
  <script src="/script.js"></script>
</head>

<body>
  <div class="container">
    <video src="/192687.mp4" autoplay muted loop></video>
    <h1>Port folio</h1>
  </div><!-- /.container -->
</body>

</html>

CSS

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container h1 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 16vw;
  font-family: "Impact";
  mix-blend-mode: screen;
}

解説

このコードは、HTMLの.containerクラスを持つ要素にスタイルを適用するCSSの一部です。具体的には、ビデオとテキストオーバーレイのビジュアルデザインを設定しています。以下、重要な部分の簡単な説明です：

.containerスタイル:
- position: relative;は、このコンテナ内の絶対配置される子要素（ここではh1）が、この.container要素を基準に位置づけられることを意味します。
- width: 100%;とheight: 100vh;により、コンテナはビューポートの全幅を使用し、高さはビューポートの高さ（100vh）に設定されます。
.container videoスタイル:
- width: 100%;とheight: 100%;により、ビデオはコンテナを完全に埋めるように拡張されます。
- object-fit: cover;は、ビデオのアスペクト比を保持しながらコンテナを完全に覆うようにビデオをトリミングまたはフィットさせます。
.container h1スタイル:
- position: absolute;、top: 0;、left: 0;により、h1テキストはコンテナの上端左端から開始し、コンテナ全体に重なるように配置されます。
- display: flex;、align-items: center;、justify-content: center;により、テキストは水平および垂直方向の中央に配置されます。
- background: #fff;で背景を白に設定し、font-size: 16vw;でビューポート幅に基づいた動的なフォントサイズを設定します。
- mix-blend-mode: screen;により、h1テキストと背景（この場合はビデオ）との間でスクリーンブレンドモードが適用され、テキストが背景と混ざり合いながらより明るい表示が可能になります。

このコードの目的は、フルスクリーンのビデオ背景上に中央配置された大きなテキストを表示するデザインを作成することです。mix-blend-modeを使用することで、テキストとビデオ背景の間に興味深い視覚効果を生み出すことができます。

注意事項

mix-blend-modeプロパティは、その要素が配置される背景とのブレンドにのみ影響します。つまり、要素自体の内部での色の混合には影響しません。
すべてのブラウザがmix-blend-modeプロパティをサポートしているわけではありません。特に古いブラウザでは非対応の場合がありますので、使用する際には注意が必要です。
mix-blend-modeを使用すると、ページのレンダリングに影響を与える可能性があります。特に、複雑なレイアウトや多くの要素があるページでは、パフォーマンスに影響を与えることがあります。

mix-blend-mode: screen;は、特定のビジュアルエフェクトを実現するための強力なツールですが、使用する際にはブラウザの互換性やパフォーマンスへの影響を考慮することが重要です。

まとめ