Levix's zone

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

デザインの世界では、マスキング（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 の右側です。もう 1 つの形状は、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

ご覧いただきありがとうございます。