标签的文章

1 个元素 CSS 彩虹渐变无限

当我看到这个渐变无限徽标时，我第一次有了用 CSS 实现这种效果的想法。渐变看起来与原始插图不同，因为我选择通过逻辑方式生成彩虹，而不是使用开发者工具选择器或类似的东西，但除此之外，我认为我做得非常接近——让我们看看我是如何做到的！

Ana Tudor 于 2018 年 9 月 29 日

Marcin Wichary 撰写了一篇很棒的文章，深入探讨了他如何使用 CSS 变量在应用程序中创建夜间模式和高对比度主题。关于如何使用 CSS 变量，有很多巧妙的技巧（Chris 已经…

Robin Rendle 于 2018 年 5 月 21 日

CSS 预处理器变量和 CSS 自定义属性（通常称为“CSS 变量”）可以完成一些相同的事情，但它们并不相同。

来自 Mike Riethmuller 的实用建议

如果在内部使用静态变量是可以的

…

Chris Coyier 于 2018 年 5 月 16 日

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

Ana Tudor 于 2018 年 9 月 29 日

将 CSS 变量设置为主题设计系统可能很棘手：如果它们的作用域太窄，系统将失去一致性。如果它们过于全局，您将失去粒度。

也许我们可以解决这两个问题。我想尝试将设计系统变量归纳为两种类型：全局变量和组件变量。全局变量将为我们提供跨组件的一致性。组件变量将为我们提供粒度和隔离。让我通过一个相当简单的组件为例来向您展示如何做到这一点。

Andrés Galante 于 2022 年 8 月 15 日

我已经使用 CSS 变换五年多了，一直困扰我的一件事是我无法单独动画化 transform 链的组件。本文将解释问题、旧的…

Ana Tudor 于 2019 年 3 月 15 日

这是迄今为止我在网络上看到的最深入的关于 CSS 变量的介绍，它仅仅是关于该主题的完整电子书的第一章。

事实是，我自己还在深入阅读这本书，…

Geoff Graham 于 2018 年 2 月 27 日

我最近偶然发现了这个 Pen，我的第一个想法是，它可以用三个元素来完成：一个包装器、一个范围 input 和一个 output。在 CSS 方面，这涉及使用 conic-gradient() 与…

Ana Tudor 于 2018 年 2 月 2 日

当我看到原始文章关于如何重新创建此动画的文章时，我的第一个想法是，它可以用预处理器，尤其是 CSS 变量来简化。所以让我们深入研究一下，看看如何做到！…

Ana Tudor 于 2018 年 1 月 15 日