CSS-ing糖果幽靈按鈕

最近，我尋求編碼靈感，缺乏藝術才能。我的方法？複製他人的視覺吸引力創作，重點關注清潔，簡潔的代碼。這些糖果幽靈按鈕吸引了我的注意！

它們似乎非常適合快速項目。在十五分鐘內，我在鉻中實現了這一目標：

該技術值得共享。本文詳細介紹了我的過程並探討了替代方法。

初始設置

一個簡單的按鈕元素形成基礎，其中包含了用於表情符號插入的data-ico屬性和样式屬性中的停止列表的自--slist CSS屬性。

 <code>boo!</code>

插圖後完成時，我發現了野生動物園的重大剪接到文本限制。它在按鈕元素上失敗， display: flex （可能是網格）元素和子元素文本。因此，此處描述的技術是不可能的。解決方法涉及築巢<span></span>在按鈕中，將所有按鈕樣式應用於<span></span>，並確保它覆蓋父母的邊界盒。對於缺少物理Apple設備訪問的Linux用戶，我建議Epiphany（謝謝，Brian！）。

CSS利用::after圖標的偽元素和文本/圖標對齊的網格佈局。還應用了邊界，填充，邊界 - 拉迪烏斯，對角線梯度的--slist列表停止列表和字體樣式。

 <code>button { display: grid; grid-auto-flow: column; grid-gap: .5em; border: solid .25em transparent; padding: 1em 1.5em; border-radius: 9em; background: linear-gradient(to right bottom, var(--slist)) border-box; font: 700 1.5em/ 1.25 ubuntu, sans-serif; text-transform: uppercase; &::after { content: attr(data-ico) } }</code>

上述代碼上的澄清： background-origin background-clip設置為border-box 。 background-origin物質將background-position的S 0,0點定位在指定框的左上角，確定了background-size參考。 border-box確保梯度跨越整個邊框盒。默認的padding-box將導致梯度僅覆蓋填充區域。

鉻特異性溶液（非標準）

該方法採用三個掩碼層和合成。在[鏈接到速成課程]中可以找到蒙版複合的複習。僅在CSS面膜層中alpha通道很重要。 RGB渠道不會影響結果。

我們從兩層開始：一個完全不透明的層覆蓋邊框框（到處都是alpha = 1），一個完全不透明的層，層僅限於填充盒（padding-box中的alpha = 1，室外0）。

將佈局框視為嵌套矩形。底層在邊界盒上完全不透明。頂層在填充框中是不透明的，並且在邊框區域透明。拐角圓形由border-radius （和填充盒的border-width ）確定。

這些層是使用exclude操作（或WebKit中的xor ）組合的。結果：填充框中的alpha = 0（兩個層都有alpha = 1），並且在邊框區域（第一層alpha = 1，第二層alpha = 0）中的alpha = 1。

代碼：

 <code>button { /* same base styles */ --full: linear-gradient(red 0 0); -webkit-mask: var(--full) padding-box, var(--full); -webkit-mask-composite: xor; mask: var(--full) padding-box exclude, var(--full); }</code>

詳細信息：紅色梯度用於簡潔。由於背景-CLIP的限制，梯度用於兩層。包括標準mask-composite ，非標準版本被覆蓋。

這會產生一個梯度邊界，但缺乏文字。添加第三個掩碼層，僅限於文本（帶有透明的文本），並與先前的結果進行置換，從而添加了文本。但是，由於mask-clip的非標準text值，這是鉻特異性的。一個@supports塊可確保跨瀏覽器兼容性（在非支持瀏覽器中無需文本掩蓋）。

 <code>button { /* same base styles */ @supports (-webkit-mask-clip: text) { -webkit-text-fill-color: transparent; --full: linear-gradient(red 0 0); -webkit-mask: var(--full) text, var(--full) padding-box, var(--full); -webkit-mask-composite: xor; } }</code>

這是一種簡單的方法，但它依賴非標準功能限制了其瀏覽器兼容性。讓我們探索替代方案，更廣泛支持的方法。

替代方法：偽元素和邊界圖像解決方案

額外的偽元素解決方案可以通過將背景夾在文本區域並使用絕對位置的梯度邊框來避免掩蓋，並在偽元素::before添加漸變邊框。邊界圖像解決方案雖然更簡單，但對border-radius有局限性。這些方法比鉻特異性解決方案提供了更好的跨瀏覽器兼容性。原始文章中提供了這些方法的更多詳細信息和代碼示例。也在原始文章中也描述的混合解決方案提供了另一種方法，但具有有關背景交互的局限性。每種方法都具有其優點和劣勢，具體取決於所需的跨瀏覽器支持和特定設計要求的水平。

以上是CSS-ing糖果幽靈按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！