文章标签

图表圆锥形渐变 CSS 变量自定义属性 Houdini

使用 CSS 变量和 Houdini 魔法创建简单的交互式饼图

我在偶然发现这个交互式 SVG 饼图时，萌生了制作此类内容的想法。虽然 SVG 代码尽可能紧凑（一个 <circle></circle> 元素！），但使用描边来创建饼图……

Ana Tudor 于 2018 年 9 月 26 日

圆锥形渐变 CSS 动画 CSS 变量自定义属性渐变遮罩

1 个元素 CSS 彩虹渐变无限循环

我最初是在看到这个由 Infographic Paradise 设计的渐变无限循环 logo 时，萌生了使用 CSS 实现此类效果的想法。渐变与原始插图中的效果略有不同，因为我选择以逻辑的方式生成彩虹，而不是使用 Dev Tools 选择器或类似工具，但除此之外，我认为我做得相当接近 - 让我们看看我是如何做到的！

Ana Tudor 于 2018 年 9 月 29 日

CSS 变量自定义属性

一天内打造暗黑主题

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

Robin Rendle 于 2018 年 5 月 21 日

CSS 变量自定义属性

CSS 自定义属性的策略指南

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

Mike Riethmuller 的实用建议

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

…

Chris Coyier 于 2018 年 5 月 16 日

自定义属性环境变量

CSS 环境变量

当关于 “刘海”和 iPhone X 的所有争论都爆发时，我们都被介绍了 CSS 中的 env() 函数。苹果帮助我们将内容从这些“不安全”区域移开的方式是……

Chris Coyier 于 2018 年 5 月 4 日

动画 CSS 变量自定义属性 Houdini 转换

Houdini 对动画转换意味着什么

我已经使用 CSS 转换超过五年了，一直困扰我的问题是，我无法单独动画 transform 链中的组件。这篇文章将解释问题、旧的……

Ana Tudor 于 2019 年 3 月 15 日

图表圆锥形渐变 CSS 变量自定义属性滑块

使用圆锥形渐变和 CSS 变量为范围输入创建甜甜圈图输出

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

Ana Tudor 于 2018 年 2 月 2 日

CSS CSS 变量自定义属性转换

使用 CSS 变量简化 Apple Watch 呼吸应用程序动画

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

Ana Tudor 于 2018 年 1 月 15 日

attr() 自定义属性

CSS attr() 函数比不上自定义属性

通常，CSS 和 HTML 之间的联系是 CSS 选择器匹配 HTML 元素，CSS 样式化它们。CSS 不了解 HTML 中的实际内容。但是，CSS 确实有办法……

Chris Coyier 于 2019 年 5 月 2 日