万圣节、CSS蒙版和逻辑门电路

在这个网站上，有一个每周的梗星期一帖子，我一般会发comiCSS漫画并找找灵感。上周，有个哥们@webbureaucrat 分享了一幅吸引我注意的漫画：

我觉得这挺好玩的，决定用HTML和CSS来做我自己的版本，用遮罩。

乍一看，第一排看起来很简单：只需两个径向渐变并选择最合适的 mask-composite。第二排则似乎更具挑战。加一个额外的渐变够不够呢？

忽略稍后会添加的线条和杰克灯人脸特征，卡通的基础是两个相交的圆形。为了做到这一点，我创建了一个包含两个径向渐变的遮罩图案。

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

进入全屏模式，退出全屏

从那时起，我知道我需要用 mask-composite 或非标准的 -webkit-mask-composite 以便以不同的方式组合蒙版。

这里是一个在Firefox上无法工作的最初的尝试。点击这里查看。这里还有一张图片。

这是一张使用CSS制作的梗图，包含南瓜和逻辑门。

我用的是这些值：

• 或者: initial。不需要特别的值，因为默认情况下，所有的蒙版会相互重叠。我甚至不需要添加 mask-composite。
• 与: intersect。应用的蒙版将是所有蒙版的交集部分。在这种情况下，就是两个圆的交集部分。
• 异或: exclude。这个选项允许两个互不重叠的选择。对于 mask-composite，可以使用 exclude 实现排除效果。然而，我们也可以使用 -webkit-mask-composite 的 xor 值...这在某些特定情况下可能更有意义，但如上所述，这并不是标准。

对于第二行而言，我需要第三个掩模来占据整个容器（尤其是对于NAND！）。我承认，这有点乱。

• NOR: -webkit-mask-composite: destination-out。由于占据整个容器的蒙版是最后一个，来自前一个蒙版的像素（相当于“减去”技巧）被清除，只留下南瓜外部的空间有颜色。
• NAND: mask-composite: subtract。我用过多的层次（共4层）来使它保持标准，并且只使用一个mask-composite值。
• XNOR: -webkit-mask-composite: xor。真讽刺，为了创建XNOR，我们使用了xor值，并添加了一个额外的层，这会使选择反转。

这有点乱。如果你还没有关注，建议你关注一下 Temani Afif 和 Ana Tudor，他们在 CSS 方面真的很棒——帮忙简化了代码，使代码更简洁，并且用了标准的 mask-composite 属性。

结果如下所示。需要为每个单元格设定掩码，并直接在代码中指定mask-composite值。顺带一提，我稍微扩展了这个笑话，加入更多逻辑门（其中一些需要超过2个或3个掩码）。

……

comiCSS 版本

虽然它目前运行得很好，我决定将它改短，只使用CSS标准来做CSS漫画，（你也可以在Medium上关注哦！）。

它仅用两种掩码生成逻辑门并利用标准掩码组合属性，所以它能在所有浏览器上运行。此外，它还会单独显示每个值。既有趣又有教育意义（希望如此）。