ホームページ > 記事 > ウェブフロントエンド > ハロウィン、(CSS) マスク、ロジック ゲート
このサイトには、毎週の Meme Monday スレッドがあり、私は通常、comicCSS 漫画を公開し、インスピレーションを探しています。先週、@webbureaucrat が私の注意を引いた漫画をシェアしてくれました:
これは面白いと思い、マスクを使用した 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 では動作しない最初の試みです。画像を残しておきます:
これらは私が使用した値です:
2 行目では、コンテナ全体を占めるために 3 番目のマスクが必要でした (NAND 用にさらに 1 つ!)。正直、ちょっと面倒です。
めちゃくちゃでした。 Temani Afif と Ana Tudor —まだソーシャル メディアでフォローしていない場合は、ソーシャル メディアでフォローしてください。彼らは CSS に優れています—が組み込まれ、コードを簡素化し、標準のマスク複合プロパティを使用するのに役立ちました。
結果は以下の通りです。各セルにマスクを設定し、マスク合成値をインラインで示す必要があります。その間に、ジョークを少し拡張して、さらにいくつかの論理ゲートを含めることにしました (中には、2 つや 3 つ以上のマスクが必要なものもありました)。
このままでも問題ありませんが、公開している CSS 漫画用に CSS 標準のみを使用した短いバージョンを作成することにしました (Medium でもフォローできます!)
2 つのマスクと標準のマスク複合プロパティで生成された論理ゲートのみを使用するため、すべてのブラウザーで動作します。さらに、各値を個別に表示します。楽しくて勉強になります (そう願っています)。
以上がハロウィン、(CSS) マスク、ロジック ゲートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。