萬聖節、(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 和Ana Tudor — 如果您還沒有關注他們，您應該在社交媒體上關注他們，他們在CSS 方面非常出色—，他們參與並幫助簡化了代碼並使用了標準的mask- composite 屬性。

結果如下。它需要為每個單元格設定掩碼，並內聯指示掩碼複合值。當我這樣做時，我決定稍微擴展一下這個笑話，並添加一些更多的邏輯門（其中一些需要的不僅僅是 2 和 3 個掩碼）：

comiCSS版本

雖然它運作得很好，但我決定製作一個較短的版本，僅使用我發布的 CSS 漫畫的 CSS 標準（您也可以在 Medium 上關注它！）

它僅使用由兩個遮罩產生的邏輯閘和標準遮罩複合屬性，因此它可以在所有瀏覽器中運作。另外，它單獨展示了每個值。有趣且有教育意義（我希望）。

以上是萬聖節、(CSS) 面具和邏輯門的詳細內容。更多資訊請關注PHP中文網其他相關文章！