Levix's zone

原文リンク：https://ishadeed.com/article/css-masking/

デザインの世界では、マスキングはユニークなデザイン効果を実現するための人気の技術です。デザイナーとして、私は何度も使用してきましたが、ウェブページで CSS マスキングを使用することはほとんどありません。私が CSS マスキングを使用しない理由は、ブラウザのサポート状況だと思います。Blink ブラウザ（Chrome と Edge）では一部の機能しかサポートされておらず、Safari と Firefox では完全にサポートされています。

良いニュースは、CSS マスキングがInterop 2023の一部になることです。これは、クロスブラウザサポートを期待できることを意味します（やった！！）。

この記事では、CSS マスキングとは何か、どのように機能するのか、そしてそれを組み合わせたユースケースや例をいくつか紹介します。

さあ、始めましょう。

マスキングとは？#

簡単に言うと、マスキングの仕組みは、要素を消去することなく部分的に隠すことです。

以下の画像を参照してください：

私たちは画像とマスクを持っています。Photoshop のようなデザインアプリケーションでは、画像を灰色の形状に挿入することができ、これによりマスクされた画像が生成されます。

その仕組みは、画像の一部を隠すことであり、消去するのではありません（それらはまだそこにありますが、隠されています）。

これがマスキングの核心的な概念であり、形状を使用して要素の一部を表示および非表示にします。私たちはさらにユニークなマスキングコンテンツを探求できます。

たとえば、以下のようなグラデーションマスクを作成できます。

グラデーションには、塗りつぶしと透明なピクセルがあります。塗りつぶしの部分は要素の一部の可視領域であり、透明な部分は隠された部分です。

Photoshop では、一組のレイヤーにレイヤーマスクを追加できます。そのグループ内の内容がマスクされます。その仕組みは、ブラシツールを使用してグループの一部を隠すことでマスクを実現します。

マスクされた内容は消去されるのではなく、隠されています（グループアイテムに注意してください）。

さて、以上は理論的な内容でした。次の記事では、CSS マスキングの使用方法、その仕組み、いくつかのユースケースや例を紹介します。

CSS でマスキングを使用する方法#

CSS では、マスク要素を作成する方法はいくつかあります：

• mask プロパティ
• clip-path プロパティ
• SVG <mask>

mask プロパティと clip-path の主な違いは、前者が画像やグラデーションに使用され、後者がパスに使用されることです。この記事では、mask プロパティに重点を置きます。

CSS では、mask のショートハンドプロパティがあり、background プロパティと似ています。そう、あなたは間違っていません。これが、私がこの構文を覚えやすい理由です。なぜなら、その構文は background プロパティと完全に同じですが、少しだけ他のプロパティを持っているからです。

すべての CSS マスキングプロパティを列挙するのではなく、マスキング機能の例を段階的に追加して、視覚的に違いを発見できるようにします。

CSS の背景は次のようになります：

.card__thumb {
    background-image: url('hero-cool.png');
}

CSS マスキングは次のようになります：

.card__thumb {
    mask-image: url('hero-cool.png');
}

クールですね？これにより、CSS マスキングを理解し、習得するのが容易になります。

さて、最初の例を CSS で再現してみましょう。

まず、形状を png 画像としてエクスポートする必要があります。

マスクをその画像に適用したいと仮定します。

<img src="ahmad-shadeed-web-directions.jpg" alt="" />

img {
    mask-image: url("shape.png");
}

結果を予測できますか？デフォルトでは、マスクは繰り返され、そのサイズはマスク画像自体と同じになります。以下のようになります：

復元するには、mask-repeat を no-repeat に設定する必要があります。CSS 背景画像と同様です。

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
}

素晴らしい！マスクは左上に配置されており、mask-position を使用して変更できます。再度注意してください、構文は CSS 背景画像の設定と完全に同じです！

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
}

位置の他にも、マスクのサイズを変更することもでき、これはマスク画像が要素のサイズに応じて反応するのに役立ちます。

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 60%;
}

いくつかのマスクプロパティがありますが、今はそれらを使ってあなたの学習意欲を削ぐつもりはありません。後で実際のユースケースで紹介します。

CSS グラデーションを使用したマスキング#

CSS マスキングは画像を使用するだけではありません。グラデーションを利用して強力で便利なマスキング効果を作成することもできます。

後でいくつかの便利なユースケースを示しますが、今はグラデーションがマスキングとどのように組み合わさるかの基本原理に焦点を当てたいと思います。

以下の例では、mask-image は全黒から透明への CSS 線形グラデーションで構成されています。

img {
    mask-image: linear-gradient(#000, transparent);
}

MDNによると：

デフォルトでは、これはマスク画像のアルファチャンネルが要素のアルファチャンネルと掛け合わされることを意味します。mask-modeプロパティを使用して制御できます。

これは、黒以外の任意の色を使用できることを意味します。マスクは依然として機能します。デフォルトのマスクモードはalphaに設定されています（後で詳しく説明します）。

img {
    mask-image: linear-gradient(red, transparent);
}

同様に、マスクの概念は透明なピクセルが隠されることです。以下は、ハードカラーのストップを持つグラデーションの簡略化された例です：

img {
    mask-image: linear-gradient(#000 50%, transparent 0);
}

素晴らしい！これで、核心的なマスキングの概念が明確になったと思います（そう願っています）。さあ、CSS マスキングのいくつかの実際のユースケースを探求しましょう。

実際のユースケースと例#

画像をフェードアウトさせる#

マスキングの面白い用途の 1 つは、画像をフェードアウトさせ、下の背景と混ぜることです。

以下の画像を考えてみてください：

css-masking-use-case-fade-image-light.png

一見すると、背景色と同じグラデーションを追加したくなるかもしれません。こんな感じで：

.hero__thumb:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #f1f1f1, transparent)
}

これは機能するかもしれませんが、メインの背景色が変わると失敗します。ホームページのバナーにカクつきが見られます：

CSS マスキングを使用すると、ホームページのバナーをマスクして、任意の背景色と組み合わせることができます。

.hero__thumb {
    mask-image: linear-gradient(#000, transparent);
}

これで完了です！フェードアウトのトランジション効果がリアルになり、メインページの背景を変更しても失敗しません。以下の例を参照してください：

テキスト内容をマスクする：例 1#

長いテキストを表示したいが、完全に表示するスペースが不足している場合、解決策はテキストの先頭と末尾をフェードアウトさせ、テキストがどちらの方向にもアニメーションして残りの内容を表示することです。

以下の画像を考えてみてください：

再び、グラデーションのハックは機能しません。なぜなら、コンテンツの下の背景が変更されるからです。それは単色または画像である可能性があります。

CSS でこれを実現するには、コンテンツの先頭と末尾をフェードアウトさせるグラデーションマスクを追加する必要があります。

私は CSS グラデーションでこれを行い、結果を確認してから、マスクとして適用するのが好きです。これにより、マスクとして使用する前にグラデーションを視覚化できます。

.c-card__footer {
    background-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}

上記の内容をマスクとして適用できます。

.c-card__footer {
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}

完璧ではありませんか？グラデーションの値を微調整して、結果が完璧になるまで続けることができます。

テキスト内容をマスクする：例 2#

これは前の例と同じですが、垂直方向に適用されます。私は Instagram のライブビデオでこの状況を見たことがあります。

以下の画像を考えてみてください：

コンテンツが上から流れ出ているのに注意してください。この小さな場所にはフィードのコメント、操作、その他のコンテンツがあります。CSS マスキングを使用するのは非常に適しています。

まず、グラデーションを見てみましょう。

CSS では、次のようになります：

.whatever-the-class-name {
    mask-image: linear-gradient(to bottom, transparent, #000);
}

リストをマスクする#

CSS マスキングを研究しているときに、このクールな例を見ました。このアイデアは、特徴、コース、または他の何かの一連のアイテムがあり、テキストをフェードアウトさせてユーザーの好奇心を引き起こすことです。

以下の例を考えてみてください：

左側にリストがあり、最下部がフェードアウトしています。CSS マスキングは、画像や濃い背景と混ぜることができるため、これに非常に適しています。

マスキンググラデーションを見て、その仕組みを理解しましょう。

CSS では、次のようになります：

.list {
    mask-image: linear-gradient(to bottom, #000, transparent 95%);
}

面白い画像効果#

CSS マスキングとグラデーションを使用すると、視覚効果を作成する可能性は無限大です。これは、画像に視覚効果を作成する方法を示す簡単な例です。

これは、私がこのデモのために作成した迅速なデザインです。

あなたが見ている画像効果には 5 つの線形グラデーションが含まれており、各グラデーションに異なるグラデーション位置を追加することで、類似の効果を得ることができます。

グラデーションを詳しく見てみましょう：

.thumb {
    mask-image: linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000);
    mask-size: 18% 70%;
    mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
    mask-repeat: no-repeat;
}

視覚的には、マスクは次のようになります：

各矩形のマスクにフェードアウト効果を作成するには、各グラデーションを更新し、「transparent」キーワードを含める必要があります。

.thumb {
    mask-image: linear-gradient(to bottom, transparent, #000),
    linear-gradient(to bottom, #000, transparent),
    linear-gradient(to bottom, transparent, #000),
    linear-gradient(to bottom, #000, transparent),
    linear-gradient(to bottom, transparent, #000);
    mask-size: 18% 70%;
    mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
    mask-repeat: no-repeat;
}

ホバー時にマスクのサイズや位置をアニメーションさせることもできます。

css-mask-image-effect.mp4

これは強力です。スクロールに基づくアニメーションと組み合わせると、物事が制御を失う可能性があります（ただし、良い意味で）。

丸角タブ#

私は UI エフェクトのために CSS マスクを試すことを考えました。このエフェクトは丸角タブと呼ばれています。

このアイデアは、要素の border-radius と融合する形で要素の側面を丸くしたいということです。

このブログ記事では、Chris Coyier が複数の擬似要素を使用して実現するテクニックを説明しています。よりダイナミックな解決策は、CSS マスクを使用することです。

まず、実現したい形状を詳しく見てみましょう。

形状は正方形と円から構成されており、私たちが必要とするのはそれらの交差点です。

どうやって実現するのでしょうか？複数のマスクを使用し、mask-compositeプロパティを使用してそれらの上で合成操作を実行できます。

まず、マスクを収容する要素を作成する必要があります。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
}

このスペース内で、組み合わせるために円と正方形を描画する必要があります。幸いなことに、線形と放射状のグラデーションを混合することで実現できます。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
    background-image: linear-gradient(to top, #000, #000),
    radial-gradient(circle 15px at center, #000 80%, transparent 81%);
    background-size: 12px 12px, 100%;
    background-position: bottom left, center;
    background-repeat: no-repeat, repeat;
}

以下の点に注意してください：

• 正方形には 12px 12px をサイズとして追加しました。
• 正方形は左下に配置されています。
• 正方形の形状は繰り返す必要はありません。

上記は、視覚的に 2 つのグラデーションの効果を示すためのものです。次のステップは、それらを実現することです！CSS マスキングでは、mask-compositeプロパティを使用して 2 つの形状を組み合わせることができます。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
    mask-image: linear-gradient(to top, red, red),
    radial-gradient(circle 15px at center, green 80%, transparent 81%);
    mask-size: 12px 12px, 100%;
    mask-position: bottom left, center;
    mask-repeat: no-repeat, repeat;
    mask-composite: subtract;
}

これは上記の形状の CSS の右側です。もう一つの形状は、mask-positionを変更するだけで反転させることができます。

.nav-item.active:after {
    /* その他のスタイル */
    mask-position: bottom right, center;
}

デモ

複数のアバターを切り抜く#

私の切り抜き効果に関する記事では、CSS を使用して切り抜きを作成するさまざまな方法を探求しました。

その中の 1 つの例は、CSS マスキングに非常に適しています。

CSS マスキングを使用すると、放射状のグラデーションを使用してその効果を実現できます。

.avatar {
    -webkit-mask-image: radial-gradient(ellipse 54px 135px at 11px center, #0000 30px, #000 0);
}

このような詳細な例がたくさんあるので、ぜひこの記事を読むことをお勧めします。

結論#

私が CSS マスキングを学び始めたとき、リソースは限られており、さらに重要なことに、私たちの日常のワークフローで使用できる実際のユースケースは非常に少なかったです。この記事を通じて、次のプロジェクトで CSS マスキングをどこで使用できるかを知っていただければ幸いです。

ちなみに、mask-modeなどのプロパティについては深く掘り下げていません。正直なところ、それらを使用して解決する問題を見つけられなかったからです（今のところ）。このプロパティを使用するより説得力のある例ができたら、この記事を更新します。

さらなるリソース#

もっと CSS マスキングの例でスキルを向上させたい場合は、以下をチェックする必要があります：

• あなたのアバターに素敵なホバー効果を提供する by Temani Afif
• マスク合成：クイックスタートガイド by Ana Tudor
• CSS のみで実現されたスピーチバブル by Temani Afif
• クールなグラデーションボーダーホバー効果 by Temani Afif

お読みいただきありがとうございます。