ハロウィン、(CSS) マスク、ロジックゲート-CSSチュートリアル-php.cn

ハロウィン、(CSS) マスク、ロジックゲート

DDD

リリース： 2024-10-30 05:07:03

オリジナル

237 人が閲覧しました

このサイトには、毎週の Meme Monday スレッドがあり、私は通常、comicCSS 漫画を公開し、インスピレーションを探しています。先週、@webbureaucrat が私の注意を引いた漫画をシェアしてくれました:

Halloween, (CSS) Masks, and Logic Gates

これは面白いと思い、マスクを使用した HTML と CSS で独自のバージョンを作成することにしました。

一見すると、最初の行は 2 つの放射状グラデーションと最適なマスク合成を選択するだけで簡単に作成できるように見えました。 2列目はより困難に見えました。グラデーションを 1 つ追加するだけで十分でしょうか?

後で追加される線とジャック・オ・ランタンの顔の特徴を無視すると、漫画のベースは交差する 2 つの円になります。これを実現するために、2 つの放射状グラデーションを含むマスクを作成しました。

.pumpkin {
  mask:
    /* trick */
    radial-gradient(circle at 40% 60%, #000 25%, #0000 0),
    /* treat */
    radial-gradient(circle at 60% 60%, #000 25%, #0000 0);
}

ログイン後にコピー

そこから、さまざまな方法でマスクを組み合わせるには、mask-composite または非標準の -webkit-mask-composite を使用する必要があることがわかりました。

これは、Firefox では動作しない最初の試みです。画像を残しておきます:

Halloween, (CSS) Masks, and Logic Gates

これらは私が使用した値です:

または: イニシャル。デフォルトではすべてがオーバーラップするため、特別な値は必要ありません。マスクコンポジットを追加する必要さえありませんでした。
AND: 交差します。適用されるマスクは、すべてのマスクの交差部分になります。この場合、両方の円の交点です。
XOR: 除外します。これにより、2 つの選択肢が可能になります。マスク合成の場合、除外は exclude で実現できます。ただし、-webkit-mask-composite の xor 値を使用することもできます。この場合、これはより理にかなっていますが、上で述べたように、標準ではありません。

2 行目では、コンテナ全体を占めるために 3 番目のマスクが必要でした (NAND 用にさらに 1 つ!)。正直、ちょっと面倒です。

NOR: -webkit-mask-composite: destination-out。コンテナ全体を占めるマスクは最後であるため、前のマスクのピクセル (トリック OR トリートに相当) がクリアされ、カボチャの外側のスペースに色が残ります。
NAND: マスク複合: 減算。これを非常に多くのレイヤー (4 つ) で過度に複雑にし、標準を維持し、単一のマスク合成値を使用するようにしました。
XNOR: -webkit-mask-composite: xor。皮肉です。 XNOR を作成するには、xor 値を使用しますが、選択範囲を「反転」させる追加レイヤーを使用します。

めちゃくちゃでした。 Temani Afif と Ana Tudor —まだソーシャルメディアでフォローしていない場合は、ソーシャルメディアでフォローしてください。彼らは CSS に優れています—が組み込まれ、コードを簡素化し、標準のマスク複合プロパティを使用するのに役立ちました。

結果は以下の通りです。各セルにマスクを設定し、マスク合成値をインラインで示す必要があります。その間に、ジョークを少し拡張して、さらにいくつかの論理ゲートを含めることにしました (中には、2 つや 3 つ以上のマスクが必要なものもありました)。