純粋な CSS で中空効果を実現するためのサンプルコード

私は最近、空洞化効果について研究しました。

背景クリップ: テキスト

背景はテキストの前景色にクリップされます。私は最初に CSS-Tricks でこの使用法を見ました。CSS-Tricks の Web サイトでは、この方法があらゆるところで使用されています。

この方法により、単純な画像の背景のくり抜き効果を作成することは難しくなくなりました。キーコードは数行しかありません。

.ラッパー{
  /* ... */
  背景画像: url("/path/to/your/image");
  背景クリップ: テキスト; /* ! */
  色: 透明; /* ! */
}

ほんの数行で見た目が大きく変わります。前後の比較:

さらに、上記よりも実践的なデモがあります

background-clip 「background」ファミリーに属しているため、当然ながら画像やグラデーションとの関連が深くなります。ただし、くり抜きには必ずしも画像やグラデーションを使用するわけではありません。ビデオ、テキスト、またはさらに複雑な DOM 要素に中空のエフェクトを作成したい場合はどうすればよいでしょうか?

要点を述べます: CSS マスクプロパティ

これは考えられる最も直接的な方法であるはずです。結局のところ、名前に「マスク」という言葉が含まれているので、誰がそれを無視できるでしょうか?

CSS mask-*プロパティは、CSS マスキング モジュール レベル 1 で定義されています。この仕様では、多くの人によく知られているclipおよびclip-pathプロパティも定義されています。つまり、この CSS モジュールには、マスキングとクリッピングの両方が含まれています。

最初の例

新しいプロパティではありますが、マスクプロパティの設定は難しくありません。これが最初の例です。

<div class="マスク" />

.マスクされた{
  高さ: 100px;
  幅: 100ピクセル;
  背景: 線形グラデーション(赤、オレンジ、黄色、薄緑、青、紫、赤);
  マスク: url("https://github.githubassets.com/pinned-octocat.svg");
}

下記がその効果です。

上記の使用法はまだ非常にシンプルです。 maskパラメータを指定します。その値はGitHub から取得したSVG 画像です。カラフルなグラデーションがクリップされ、マスクされて有名な猫になります。

マスク-*大家族

mask属性は、実際には多くのmask-*の省略形です。

マスク画像
マスク繰り返し
マスク位置
マスククリップ
マスクの起源
マスクサイズ
-
マスクタイプ
マスク合成
マスクモード

background-*の既視感はないですか？そうです、その中の多くのプロパティは background/border と一致しており、その機能も同じです。ただし、 background-*背景に使用され、 mask-*はマスク レイヤーに使用される点が異なります。つまり、背景で使用されるトリックは、マスクの世界でも引き続き使用できます。たとえば、この効果を実現するには、次のようにします。

.マスク{
  身長： /* ... */;
  幅： /* ... */;
  背景： /* ... */;
  マスク画像: url(https://github.githubassets.com/pinned-octocat.svg);
  マスクサイズ: 5em;
  マスクの位置: 中央;
  /* 気分が良ければアニメーションを追加しても大丈夫です */
}

マスキング効果をさらに制御

読者の皆さんは、 mask-*ファミリーに新しい顔があることに気づいたかもしれません。これは簡単に理解できます。mask は非常に強力な機能なので、 background-*を完全にコピーするのは残念です。

mask-mode

mask-mode は特定のマスキング モードを指定するために使用されます。

mask-type CSS プロパティはmask-imageが「明るさタイプ」マスクに使用されるか、「不透明度タイプ」マスクに使用されるかを設定します。 mask-mode: alaph不透明度 (つまり alaph チャネル) をマスク値として使用することを意味し、 mask-mode: luminance明るさの値をマスク値として使用することを意味します。

それで、マスク値とは何でしょうか?マスク値は、マスクされた要素がマスクされる度合いを示します。マスク値が大きいほど、マスクされた領域がより多く表示されます。マスク値が最大の場合、領域は完全に不透明になります。例えば：

<div class="mode">ABCDEFG</div>

.モード{
  高さ: 200px;
  幅: 300ピクセル;
  /* その他 */
  マスク画像: 線形グラデーション(左、黒、黄色);
  mask-mode: 輝度; /* または alaph ? */
} 

左側はマスク画像、中央はluminance 、右側はalaphを使用しています。ここでの画像は不透明であるため、 alaphモードで永続的に不透明な画像をマスクとして使用すると、マスク効果は得られません。ただし、画像には明るさの変化があるため、 luminanceの下のマスクされた要素は透明度の変化を示します。

一般的に、 luminanceモードでは、3 つの RGB チャネルの値に基づいて各ピクセルの輝度値を計算する必要があるため、少し遅くなります。

mask-composite

複数のマスク画像が重ね合わされている場合のマスク効果の処理方法を指定します。一部のプロパティ値の効果は、マスク イメージ階層の順序によって異なります。

MDNのCodePenを試してみてください

maskについては以上です。より具体的で正確な説明については、 MDN をご覧ください。

ブレンドモード

これは最も魔法のような方法であるはずです。 PS を使用する際、「ブレンドモード」という用語をよく目にします。何年も前に初めて Photoshop を使用したとき、「ブレンドモード」がどのようなものなのか非常に興味を持ち、すぐに Photoshop に対する畏敬の念を抱いたことを覚えています。しかし、当時私たちが感じた畏怖にもかかわらず、今ここで言及されている「ハイブリッドモデル」は非常に理解しやすいものです。

いわゆる「ブレンドモード」とは、レイヤーが重なり合ったときにピクセルの最終的なカラー値を計算する方法を指します。各ブレンド モードは、前景色の値と背景色の値 (それぞれ上部の色と下部の色) を入力として受け取り、いくつかの計算を実行して、画面に表示される最終的な色の値を出力します。最終的な表示色は、レイヤー内の重なり合う各ピクセルに対して実行されるブレンド モード計算の結果です。 簡単に言えば、ブレンドモードは、あるレイヤーを別のレイヤーに追加したときに何が起こるかを決定します。

CSS では、 mix-blend-modeを使用してブレンドモードを指定できます。

普段は「ブレンドモード」のようなものは使わないので、 blend-modeのデフォルト値はnoneのでしょうか？と疑問に思うかもしれません。はい。実際、上のレイヤーが下のレイヤーを「覆う」という最も一般的な状況も、 normal呼ばれるブレンド モードに属します。これは基本的に、前景色の値のみを保持し、背景色の値を完全に破棄するブレンド モードです。

ここでは、中空効果を実現するために使用されるブレンド モードであるscreenについてのみ説明します。このブレンドモードの特性は、前景レイヤーが黒の場合、最終的な可視色は背景レイヤーの色そのままになり、前景レイヤーが白の場合、最終的な可視色は白そのままになるというものです。

これが空洞化とどう関係するかは、すでにお分かりだと思います。例を見てみましょう。

これで、 <video>と「白い背景に黒いテキスト」のロゴ オーバーレイができました。

フローティング フレームに次の CSS を追加します。

.ロゴ {
    /* ... ... */
    ミックスブレンドモード: スクリーン;
}

次のようになります。

具体的なコードと効果を確認するには、このデモをご覧ください。

確かに、歯車アイコンは中空になっています。しかし、なぜ？

まず一つ明確にしておきましょう。フローティング レイヤーをビデオの上に配置します。フローティング レイヤーは「前景」で、ビデオは「背景」です。まず、フローティング レイヤーの白い部分を見てみましょう。どの色の上に白を置くと白になるため、白い部分は保持されます。また、どの色の上に黒を置くと、下のレイヤーの色になるため、黒い部分はくり抜かれたように見えます。

ただし、この実装は、黒と白のみが使用されているため、ちょっとしたハックです。フローティング レイヤーのbackground-colorとして他の色を使用すると、くりぬき効果のようには見えません。この場合、前述のmaskファミリが依然として機能する必要があります。ただし、白い背景の状況に限っては、 mix-blend-mode依然として実行可能なソリューションです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。