Halloween, (CSS-)Masken und Logiktore

Auf dieser Seite gibt es einen wöchentlichen Meme Monday-Thread, in dem ich normalerweise den comiCSS-Cartoon veröffentliche und nach Inspiration suche. Letzte Woche hat @webbureaucrat einen Cartoon geteilt, der meine Aufmerksamkeit erregt hat:

Ich fand es lustig und beschloss, meine eigene Version mit HTML und CSS mithilfe von Masken zu erstellen.

Auf den ersten Blick schien die erste Reihe einfach zu erstellen: zwei radiale Farbverläufe und die Auswahl des besten Maskenverbunds. Die zweite Reihe schien anspruchsvoller zu sein. Würde das Hinzufügen eines zusätzlichen Farbverlaufs ausreichen?

Wenn man die Linien und die Merkmale des Kürbislaternengesichts außer Acht lässt – die später hinzugefügt würden –, würde die Basis des Cartoons aus zwei sich schneidenden Kreisen bestehen. Um das zu erreichen, habe ich eine Maske mit zwei radialen Farbverläufen erstellt:

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

Von da an wusste ich, dass ich mask-composite oder das nicht standardmäßige -webkit-mask-composite verwenden musste, um die Masken auf unterschiedliche Weise zu kombinieren.

Hier ist ein erster Versuch, der unter Firefox nicht funktioniert. Ich hinterlasse ein Bild:

Dies sind die Werte, die ich verwendet habe:

• ODER: Initiale. Es ist kein spezieller Wert erforderlich, da sich standardmäßig alle überlappen. Ich musste nicht einmal einen Maskenverbund hinzufügen.
• UND: schneiden. Die angewendete Maske ist eine Schnittmenge aller Masken. In diesem Fall der Schnittpunkt beider Kreise.
• XOR: ausschließen. Dieser lässt zwei Alternativen zu. Für mask-composite kann der Ausschluss mit „exclude“ erreicht werden. Wir könnten aber auch den xor-Wert von -webkit-mask-composite verwenden... was in diesem Fall zwar sinnvoller ist, aber, wie oben erwähnt, nicht dem Standard entspricht.

Für die zweite Reihe brauchte ich eine dritte Maske, um den gesamten Container zu füllen (und eine zusätzliche für das NAND!). Ich muss zugeben, es ist ziemlich chaotisch:

• NOR: -webkit-mask-composite: Zielausgang. Da die Maske, die den gesamten Container einnimmt, die letzte ist, werden die Pixel der vorherigen Maske (entspricht Süßes ODER Saures) gelöscht, sodass der Raum außerhalb des Kürbisses mit Farbe zurückbleibt.
• NAND: mask-composite: subtrahieren. Ich überkompliziere dies mit viel zu vielen Ebenen (4) und versuche, den Standard beizubehalten und einen einzigen Masken-Komposit-Wert zu verwenden.
• XNOR: -webkit-mask-composite: xor. Die Ironie. Um XNOR zu erstellen, verwenden wir den xor-Wert, jedoch mit der zusätzlichen Ebene, die dazu führt, dass die Auswahl „umgedreht“ wird.

Es war chaotisch. Temani Afif und Ana Tudor – Sie sollten ihnen in den sozialen Medien folgen, wenn Sie es noch nicht getan haben, sie sind großartig in CSS – haben mitgeholfen und dabei geholfen, den Code zu vereinfachen und die Standardeigenschaft mask-composite zu verwenden.

Das Ergebnis ist unten. Es erfordert das Festlegen der Masken für jede Zelle und die Inline-Angabe des aus der Maske zusammengesetzten Werts. Und während ich dabei war, beschloss ich, den Witz ein wenig zu erweitern und ein paar weitere logische Tore einzubauen (einige davon erforderten mehr als nur 2 und 3 Masken):

---

comiCSS-Version

Obwohl es so wie es ist, gut funktioniert, habe ich beschlossen, eine kürzere Version zu erstellen, die nur den CSS-Standard für den von mir veröffentlichten CSS-Comic verwendet (Sie können ihm auch auf Medium folgen!)

Es werden nur die mit zwei Masken generierten Logikgatter und die Standardeigenschaft mask-composite verwendet, sodass es in allen Browsern funktioniert. Außerdem wird jeder Wert einzeln angezeigt. Unterhaltsam und lehrreich (hoffe ich).

Das obige ist der detaillierte Inhalt vonHalloween, (CSS-)Masken und Logiktore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!