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中文网其他相关文章！