文章标签

灵活重复的 SVG 遮罩

Tyler Gaw 提醒我们，mask-image 可以像 background-image 一样重复、调整大小和移动，这很有趣，可以结合使用并进行试验。我可以看到它可以作为 <hr 的一个有趣选项，就像 Sara 正在做的那样。…

Chris Coyier 于 2020 年 3 月 22 日

前几天，Cassie Evans 在推特上发布了一个非常棒的技巧，我以前从未见过：使用 SVG 在一个 GIF 上遮罩另一个 GIF。效果非常棒，特别是如果你恰好获取了一个彩色的 GIF，并且…

Robin Rendle 于 2019 年 12 月 3 日

我发现自己至少每个月都要在网上搜索 Yoksel 的一些工具。我认为我会在这里列出一些我最喜欢的工具，以防你不知道它们。…

Chris Coyier 于 2019 年 11 月 15 日

在这篇文章中，我们将使用 CSS 超能力来创建一种视觉效果，其中两个元素重叠并交织在一起。这种设计的灵感来自于我短暂的灵性探索，最终我来到了圣经计划…

Preethi 于 2019 年 10 月 14 日

在 2018 年初，当我开始更深入地研究 CSS 渐变遮罩以创建有趣的视觉效果时，人们会认为这在其他情况下是不可能的，只需使用一个元素和一点…

Ana Tudor 于 2019 年 3 月 2 日

这是我之前关于剪辑路径的文章的后续。上次，我们深入研究了剪辑的基础知识以及如何入门。我们查看了一些示例，说明了我们可以用…

Mikael Ainalem 于 2018 年 8 月 24 日

当我看到 Infographic Paradise 设计的渐变无限循环徽标时，我首先产生了用 CSS 实现这种效果的想法。渐变看起来与原始插图中的不同，因为我选择以逻辑方式生成彩虹，而不是使用 Dev Tools 选择器或类似的东西，但除此之外，我认为我做得非常接近——让我们看看我是如何做到的！

Ana Tudor 于 2018 年 9 月 29 日

假设我告诉你，我们可以只用一个 HTML 元素和每个元素的五个 CSS 属性来获得以下结果。没有 SVG，没有图像（除了根元素上的 background，它只是为了清楚地表明…

Ana Tudor 于 2018 年 9 月 29 日

当我看到 Chris 关于带缺口的盒子的文章时，我记得我之前接到一个挑战，要求用 CSS 设计类似的东西，但要使用圆形、挖角的角。所以，让我们看看我们如何用这种方式实现它，并在关注浏览器支持的同时扩展到多个角。

Ana Tudor 于 2019 年 2 月 21 日