跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
custom properties

90 篇文章
{
,

}
文章“如何使用 CSS 自定义属性播放和暂停 CSS 动画”的直达链接
动画 自定义属性 details/summary IntersectionObserver 关键帧

如何使用 CSS 自定义属性播放和暂停 CSS 动画

让我们看看 CSS @keyframes 动画,特别是关于如何暂停并控制它们。有一个 CSS 属性专门用于此,可以使用 JavaScript 控制,但要获得…

Avatar of Mads Stoumann
Mads Stoumann 于 2021 年 1 月 21 日 发布
文章“将自定义属性用作状态”的直达链接
自定义属性 状态

将自定义属性用作状态

这是 James Stanley 的一个有趣的想法:一个CSS 文件(可能每天更新)包含“季节性”颜色(例如,春季为绿色,秋季为橙色)的 CSS 自定义属性。然后,您将使用这些值来为您的网站设置主题,知道这些…

Avatar of Chris Coyier
Chris Coyier 于 2021 年 1 月 5 日 发布
文章“使用 CSS 自定义属性和 Tailwind 进行颜色主题设置”的直达链接
自定义属性 Tailwind 主题设置

使用 CSS 自定义属性和 Tailwind 进行颜色主题设置

自定义属性 不仅使我们的代码更有效率,而且还允许我们使用 CSS 做一些真正的魔法。它们在主题设置方面具有巨大的潜力。在 Atomic Smash,我们使用 Tailwind CSS,…

Avatar of Michelle Barker
Michelle Barker 于 2021 年 1 月 25 日 发布
文章“CSS 自定义属性切换技巧”的直达链接
自定义属性

CSS 自定义属性切换技巧

早在 2020 年 7 月,我收到了来自 James0x57 的一封邮件(我总是尝试用他们的名字称呼人们,但我认为我感觉他们更喜欢用屏幕名称),邮件中说

整个世界

…
Avatar of Chris Coyier
Chris Coyier 于 2022 年 11 月 22 日 发布
文章“使用 @property 声明 CSS 自定义属性”的直达链接
@property 自定义属性

使用 @property 声明 CSS 自定义属性

Una Kravetz 深入探讨了 Chrome 如何允许您使用比字符串更多信息直接从 CSS 声明 CSS 自定义属性。…

Avatar of Chris Coyier
Chris Coyier 于 2020 年 9 月 2 日 发布
文章“使用自定义属性创建 CSS 计时器条”的直达链接
CSS 动画 自定义属性 计量器

使用自定义属性创建 CSS 计时器条

前几天我在做一件需要可见计时器的事情。项目中对这种类型的计时器有 UI 先例。人们不想看到数字向下跳动;看到…更理想。

Avatar of Chris Coyier
Chris Coyier 于 2020 年 8 月 18 日 发布
文章“蝉原则,使用 CSS 变量重新审视”的直达链接
自定义属性

蝉原则,使用 CSS 变量重新审视

Lea Verou 挖掘了CSS 技巧经典并将其应用于裁剪一些代码块的背景

主要思想很简单:您使用 CSS 变量编写主规则,然后使用 :nth-of-*() 规则来设置这些

…
Avatar of Chris Coyier
Chris Coyier 于 2020 年 8 月 4 日 发布
文章“使用 CSS 变量进行全局和组件样式设置”的直达链接
自定义属性 全局作用域 主题

使用 CSS 变量进行全局和组件样式设置

Sara Soueidan 这篇文章的标题对我很有吸引力。我非常喜欢将一些 CSS 应用于全局,而将一些 CSS 应用于组件作用域的想法。我对如何…不太感兴趣。

Avatar of Chris Coyier
Chris Coyier 于 2020 年 6 月 30 日 发布
文章“当 Sass 和新的 CSS 功能发生冲突时”的直达链接
calc CSS 变量 自定义属性 filter 渐变 max min Sass

当 Sass 和新的 CSS 功能发生冲突时

最近,CSS 添加了许多新的酷炫功能,例如自定义属性和新的函数。虽然这些东西可以使我们的生活变得轻松很多,但它们也可能以有趣的方式与预处理器(如 Sass)交互…

Avatar of Ana Tudor
Ana Tudor 于 2020 年 6 月 29 日 发布
  • 更新
  • 1
  • ...
  • 3
  • 4
  • 5
  • ...
  • 10
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

关注我们的精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.