素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。

名前が示すように、マスクはマスクと翻訳されます。 CSS では、マスクプロパティを使用すると、特定の領域に画像をマスクまたはトリミングすることで、要素の表示領域の一部またはすべてを非表示にすることができます。

実はマスクは昔から存在していましたが、実用的なシナリオは多くなく、実際の戦闘で使用されることはほとんどありませんでした。この記事では、マスクを使用して作成された興味深いシナリオをいくつか紹介します。

文法

マスクを使用する最も基本的な方法は、次のように画像を使用することです。

{
    /* 画像の値 */
    mask: url(mask.png); /* ビットマップをマスクとして使用します*/
    mask: url(masks.svg#star); /* SVG グラフィック内の図形をマスクとして使用します*/
}

もちろん、写真の使用方法については後で説明します。画像を使用する方法は実際にはかなり複雑です。まず対応する画像素材を準備する必要があるからです。画像に加えて、マスクは背景に似たパラメータ、つまりグラデーションも受け入れることができます。

次のような使用法になります。

{
    mask: linear-gradient(#000, transparent) /* グラデーションをマスクとして使用*/
}

では具体的にどのように使用すればいいのでしょうか?非常に単純な例ですが、上では黒から透明へのグラデーションを作成しました。これを実践すると、コードは次のようになります。

次の画像は透明から黒へのグラデーションが重ねられています。

{
    背景: url(image.png) ;
    マスク: linear-gradient(90度、透明、#fff);
}

マスクを適用すると、次のようになります。

このデモでは、マスクの基本的な使用方法を簡単に理解することができます。

ここで、マスクの使用に関する最も重要な結論が得られます。つまり、画像の重なり合う部分と、マスクによって生成されたグラデーションの透明部分が透明になるということです。

上記のグラデーションではlinear-gradient(90deg, transparent, #fff)が使用されていることに注意してください。ここでの#fff単色部分は、効果に影響を与えずに任意の色に置き換えることができます。

CodePen デモ - MASK の基本的な使い方

MASKを使用して画像をトリミングする

上記の簡単なアプリケーションを使用すると、マスクを使用して簡単な画像の切り抜きを実現できます。

マスクを使用して画像のコーナーカットマスクを実装する

線形グラデーションを使用して、単純な面取り形状を実装します。

.ノッチング{
    幅: 200ピクセル;
    高さ: 120px;
    背景：
    線形グラデーション(135度、透明15ピクセル、濃いピンク0)
    左上、
    線形グラデーション(-135度、透明15ピクセル、濃いピンク0)
    右上、
    線形グラデーション(-45度、透明15ピクセル、濃いピンク0)
    右下、
    線形グラデーション(45度、透明15ピクセル、濃いピンク0)
    左下;
    背景サイズ: 50% 50%;
    背景繰り返し: 繰り返しなし;
}

このような：

上記のグラデーションをマスクに適用し、背景を画像に置き換えると、角をカットした効果のある画像が得られます。

背景: url(image.png);
マスク：
    線形グラデーション(135度、透明15ピクセル、#fff 0)
    左上、
    線形グラデーション(-135度、透明15ピクセル、#fff 0)
    右上、
    線形グラデーション(-45度、透明15ピクセル、#fff 0)
    右下、
    線形グラデーション(45度、透明15ピクセル、#fff 0)
    左下;
マスクサイズ: 50% 50%;
マスク繰り返し: 繰り返しなし;

得られる効果は以下のとおりです。

CodePen デモ - MASK を使用して画像のコーナーカットマスクを実装する

もちろん、クリップパスやマスクなど、上記の効果を実現する方法は他にもたくさんあります。

複数の画像でマスクを使用する

上記は、単一の画像にマスクを使用した場合の効果です。複数の写真にマスクをかけることで、どのような輝きが生まれるか見てみましょう。

2 枚の写真がある場合、マスクを使用して、それらを重ね合わせて表示できます。最も一般的な使用法:

div {
    位置: 相対的;
    背景: url(image1.jpg);
 
    ＆：：前に {
        位置: 絶対;
        コンテンツ： "";
        上: 0;左: 0;右: 0;下: 0;
        背景: url(image2.jpg);
        マスク: linear-gradient(45度、#000 50%、透明50%);
    }
}

2 つの画像が 1 つともう 1 つの画像が完全に重なり合っている場合、 mask: linear-gradient(45deg, #000 50%, transparent 50%)を使用して 2 つの画像を分離します。

CodePen デモ - MASK の基本的な使い方、複数の画像での基本的な使い方

もちろん、上で使用したマスクのグラデーションは、トランジション効果のない完全な単色の変化であることに注意してください。

マスク内のグラデーションを少し変更してみましょう。

{
- マスク: 線形グラデーション(45度、#000 50%、透明 50%)
+ マスク: 線形グラデーション(45度、#000 40%、透明 60%)
}

画像 1 から画像 2 に移行する効果を得ることができます。

CodePen デモ - MASK の基本的な使い方、複数の画像での基本的な使い方 2

遷移アニメーションにMASKを使用する

上記の準備で。上記で紹介したいくつかの方法を使用すると、 maskを使用して画像の切り替え間の遷移アニメーションを実行できます。

線形グラデーションマスクを使用する: linear-gradient() を切り替える

上記のデモを引き続き使用して、マスク値を動的に変更することで、画像の表示/遷移効果を実現できます。

コードは次のようになります。

div {
    背景: url(image1.jpg);
    アニメーション: maskMove 2s linear;
}

@キーフレーム{
  0% {
    マスク: linear-gradient(45度, #000 0%, 透明5%, 透明5%);
  }
  1% {
    マスク: linear-gradient(45度、#000 1%、透明6%、透明6%);
  }
  ...
  100% {
    マスク: linear-gradient(45度、#000 100%、透明 105%、透明 105%);
  }
}

もちろん、上記のように 1 つずつ記述するのは面倒なので、通常は SASS/LESS などのプリプロセッサを使用します。このような：

div {
    位置: 相対的;
    背景: url(image2.jpg) 繰り返しなし;
 
    ＆：：前に {
        位置: 絶対;
        コンテンツ： "";
        上: 0;左: 0;右: 0;下: 0;
        背景: url(image1.jpg);
        アニメーション: maskRotate 1.2s easy-in-out;
    }
}
 
@keyframes マスク回転 {
    @for $i は 0 から 100 まで {
        #{$i}% {
            マスク: linear-gradient(45deg, #000 #{$i + '%'}, 透明 #{$i + 5 + '%'}, 透明 1%);
        }
    }
}

次のような効果が得られます (1 つの画像を表示および非表示にし、2 つの画像を切り替える)。

CodePen デモ - MASK 線形グラデーション遷移

角度グラデーションマスク: conic-gradient() を使って切り替える

もちろん、 mask: linear-gradient()に加えて、放射状グラデーションや角度グラデーションも可能です。同じ原則が角度グラデーションにも適用されます。

@keyframes マスク回転 {
    @for $i は 0 から 100 まで {
        #{$i}% {
            マスク: conic-gradient(#000 #{$i - 10 + '%'}, 透明 #{$i + '%'}, 透明);
        }
    }
}

画像の角度による段階的な表示/切り替えを実現できます。

CodePen デモ - MASK 円錐グラデーション遷移

このテクニックについては、Zhang Xinxu の記事にさらに豊富な例が掲載されています。以下からお読みください。

使用するCSSトランジションアニメーションを変更できます

この技術を使用すると、多くの興味深い画像効果を実現できます。このような：

マスク衝突フィルターとブレンドモード

次のステップに進みます。 CSS には興味深いプロパティが数多くあり、フィルターやブレンドモードと組み合わせると、より多くの輝きを生み出すことができます。

マスクとフィルター: コントラスト()

まず、複数の放射状グラデーションを使用して、このような画像を作成します。

{
  背景: 放射状グラデーション(#000、透明);
  背景サイズ: 20px 20px;
}

見た目は特別ではないので、 filter: contrast()コントラストフィルターを使用して変更してみましょう。コードはおそらく次のようになります:

html、本文{
    幅: 100%;
    高さ: 100%;
    フィルター:コントラスト(5);
}
 
div {
    位置: 相対的;
    幅: 100%;
    高さ: 100%;
    背景: #fff;
     
    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0; 右: 0; 下: 0; 左: 0;
        背景: 放射状グラデーション(#000、透明);
        背景サイズ: 20px 20px;
    }
}

このようなグラフィックを取得し、コントラストフィルターを使用してグラフィックを非常に鮮明にすることができます。

このとき、異なるマスクマスクを重ね合わせます。さまざまな興味深いグラフィック効果を得ることができます。

体 {
    フィルター:コントラスト(5);
}
 
div {
    位置: 相対的;
    背景: #fff;
     
    ＆：：前に {
        背景: 放射状グラデーション(#000、透明);
        背景サイズ: 20px 20px;
      + マスク: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
    }
}

CodePen デモ - フィルター付きマスクの使用

線形グラデーションマスクlinear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))を重ねます。両方のグラデーションカラーが透明であることに注意してください。

または、放射状グラデーションに変更します。

{
    マスク: repeating-radial-gradient(円、35% 65%、#000、rgba(0、0、0、.5)、#000 25%);
}

CodePen デモ - フィルター付きマスクの使用

さて、次に、上記と同様に、アニメーションを追加します。

div {
    ...
     
    ＆：：前に {
        背景: 放射状グラデーション(#000、透明);
        背景サイズ: 20px 20px;
        マスク: repeating-radial-gradient(円、35% 65%、#000、rgba(0、0、0、.5)、#000 25%);
        アニメーション: maskMove 15秒 無限線形;
    }
}
 
@keyframes マスク移動 {
    @for $i は 0 から 100 まで {
        #{$i}% {
            マスク: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 + '%'});
        }
    }
}

見てください。とてもクールなアニメーション効果が得られます。

CodePen デモ - フィルター、コントラスト、アニメーション付きのマスクの使用

色相filter: hue-rotate()を使用したことを覚えていますか?これを追加することで、色も変更できるようになります。

CodePen デモ - フィルターコントラストとアニメーション 2 を使用したマスクの使用

マスクとフィルター: コントラスト() とブレンドモード

次にブレンドモードを追加します。

上記では、コンテナの背景色が実際には白#fffであることに注意してください。

もう 1 つのレベルをネストし、コンテナの背景色を追加して、ブレンドモードをオーバーレイすることで、さまざまな効果を作成できます。

maskを追加せずに、構造を再構築します。最終的な疑似コードは次のようになります。

<div class="wrap">
    <div class="inner"></div>
</div>

。包む {
    位置: 相対的;
    高さ: 100%;
    背景: 線形グラデーション(45度, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.インナー{
    高さ: 100%;
    背景: #000;
    フィルター:コントラスト(700%);
    ミックスブレンドモード: 乗算;
     
    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0; 右: 0; 下: 0; 左: 0;
        背景: 放射状グラデーション(#fff、透明);
        背景サイズ: 12px 12px;
    }
}

原則的な例の図は次のとおりです。

次のような効果が得られます。

さて、このステップではマスクはまだ適用されていないので、マスクを追加しましょう。

。包む {
    背景: 線形グラデーション(45度, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.インナー{
    ...
    フィルター:コントラスト(700%);
    ミックスブレンドモード: 乗算;
     
    ＆：：前に {
        背景: 放射状グラデーション(#fff、透明);
        背景サイズ: 12px 12px;
      + マスク: linear-gradient(#000, rgba(0, 0, 0, .5));
    }
}

CodePen デモ - マスク、フィルター、ブレンドモード

実際の効果はスクリーンショットよりもはるかに優れています。デモをクリックすると確認できます。

もちろん、ここで重ね合わせているのはmix-blend-mode: multiplyです。他のブレンドモードを試して、さまざまな効果を得ることもできます。

たとえば、 mix-blend-mode: differenceなどを追加します。

他にも興味深い重ね合わせ方があるので、興味のある学生は自分でもっと試してみる必要があります。

マスクと写真

もちろん、マスクの最も重要な機能は、やはり画像に作用することです。上記で導き出された重要な結論は次のとおりです。

画像の重なり合う部分とマスクによって生成されたグラデーション透明部分が透明になります。

また、マスク属性を介して渡された画像にも適用できます。つまり、マスクを画像素材に渡すことができ、背景画像とマスク画像の透明な重なり合う部分が透明になります。

このテクニックを使用すると、非常にクールなトランジションアニメーションを作成できます。

実際、ここではマスクに主に次のような画像を使用します。

次に、フレームごとのアニメーションを使用して、各フレームのマスクをすばやく切り替えます。

.img1 {
    背景: url(image1.jpg) 繰り返しなし 左上;
}
 
.img2 {
    マスク: url(https://i.imgur.com/AYJuRke.png);
    マスクサイズ: 3000% 100%;
    アニメーション: マスク移動 2秒ステップ(29) 無限;
}
 
.img2::前{
    背景: url(image2.jpg) 繰り返しなし 左上;
}
 
@keyframes マスク移動 {
    から {
        マスク位置: 0 0;
    }
    に {
        マスク位置: 100% 0;
    }
}

CodePen デモ - マスク遷移アニメーション

もちろんこれに様々なアニメーションを追加することも可能です。これは上で何度も実演されており、興味のある学生は自分で試すことができます。

やっと

ここまで述べてきましたが、マスクは実はまだ比較的人気のない属性です。日常業務でそれを適用する機会は多くありません。

そして、互換性も特に良いわけではありません。MDNを開くと、マスク自体に加えて、マスク関連のプロパティが多数あることがわかりますが、そのほとんどはまだ研究段階にあります。この記事ではマスク自体についてのみ簡単に紹介し、マスクに関連するいくつかの特性については別の記事で説明します。

もちろん、そうであっても、プロパティ自体から見ると、mask は依然として非常に興味深く、CSS にさらなる可能性をもたらすと思います。

素晴らしい CSS 属性 MASK の詳細な説明については、これで終わりです。CSS 属性 MASK に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Docker Compose の実践とまとめ

>>: フォーム送信の更新ページはソースコード設計にジャンプしません