万圣节、(CSS) 面具和逻辑门

在这个网站上，每周都有一个 Meme Monday 主题，我通常会在其中发布 comiCSS 卡通并寻找灵感。上周，@webbureaucrat 分享了一幅引起我注意的漫画：

我发现这很有趣，并决定使用 HTML 和 CSS 使用蒙版创建我自己的版本。

乍一看，第一行似乎很容易制作：两个径向渐变并选择最好的掩模复合材料。第二排似乎更具挑战性。添加一个额外的渐变就足够了吗？

忽略线条和南瓜灯的面部特征（稍后将添加），卡通的底部将是两个相交的圆圈。为了实现这一点，我创建了一个具有两个径向渐变的蒙版：

.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 上不起作用。我会留下图片：

这些是我使用的值：

• 或：初始。不需要特殊值，因为默认值它们都会重叠。我什至不需要添加掩模复合材料。
• AND：相交。应用的蒙版将是所有蒙版的交集。在本例中，是两个圆的交点。
• 异或：排除。这允许有两种选择。对于 mask-composite 来说，排除可以通过 except 来实现。但我们也可以使用 -webkit-mask-composite 的异或值...在这种情况下更有意义，但如上所述，它是非标准的。

对于第二行，我需要第三个掩码来占据整个容器（还需要一个用于 NAND 的掩码！）我必须承认，这有点混乱：

• NOR：-webkit-mask-composite：目的地输出。因为占据整个容器的蒙版是最后一个，所以前一个蒙版中的像素（相当于“trick OR treat”）被清除，留下南瓜外面的空间有颜色。
• NAND：掩模复合：减法。我用太多层（4）使这一层变得过于复杂，试图保持它的标准并使用单个掩模复合值。
• XNOR：-webkit-mask-composite：异或。讽刺的是。为了创建 XNOR，我们使用异或值，但使用会导致“翻转”选择的附加层。

很乱。 Temani Afif 和 A​​na Tudor — 如果您还没有关注他们，您应该在社交媒体上关注他们，他们在 CSS 方面非常出色 —，他们参与并帮助简化了代码并使用了标准的 mask-composite 属性。

结果如下。它需要为每个单元格设置掩码，并内联指示掩码复合值。当我这样做时，我决定稍微扩展一下这个笑话，并添加一些更多的逻辑门（其中一些需要的不仅仅是 2 和 3 个掩码）：

---

comiCSS版本

虽然它工作得很好，但我决定制作一个较短的版本，仅使用我发布的 CSS 漫画的 CSS 标准（您也可以在 Medium 上关注它！）

它仅使用由两个掩码生成的逻辑门和标准掩码复合属性，因此它可以在所有浏览器中工作。另外，它单独展示了每个值。有趣且有教育意义（我希望）。

以上是万圣节、(CSS) 面具和逻辑门的详细内容。更多信息请关注PHP中文网其他相关文章！