笔记线程
为什么我的 3D 视图切换无法正常工作?
“为什么我的 3D 视图过渡不生效?!”Sunkanmi 直面这一困扰,并提供了优雅的解决方案。
《为什么我的 3D 视图过渡不生效?》最初以手写形式创作,并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。
无需在导航标签中包含“导航”一词。
这是撰写屏幕阅读器内容时需要牢记的一个细微之处。
在最初由 CSS-Tricks 手写并发布、充满爱意的导航标签中,无需包含“导航”一词。你也应该订阅我们的通讯。
打造令人难忘的网页体验:现代 CSS 工具集
创造令人难忘的体验有多种方式。有时,它仅仅是一个流畅完成的操作表单。但在此,我感兴趣分享的是,当我希望一个网站显得生动且令人铭记时,我所采用的技巧。
《创造令人难忘的 Web 体验:现代 CSS 工具集》最初由我手写,并满怀爱意发布于 CSS-Tricks。你也应该订阅那封通讯。
滚动驱动、滚动触发、滚动状态与视图转换
我说的是一回事,想的却是另一回事;我用的也是另一回事,却需要的是这一回事。正在为未来的自己比较滚动驱动动画、滚动触发动画、容器查询滚动状态以及视图转换。
滚动驱动、滚动触发、滚动状态和视图转换最初由我手写,并满怀爱意地发布于 CSS-Tricks。你也应该订阅那封通讯。
再次尝试绘制完美的 CSS 饼图……无需 JavaScript!
我们再次深入探讨 CSS 饼图!此次,作者 Antoine Villepreux 展示了无需一行 JavaScript 即可实现的语义化且灵活的图表。
《再次尝试完美的 CSS 饼图……无需 JavaScript!》最初为手写内容,并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
偏移路径
CSS 中的 offset-path 属性定义了元素在动画过程中遵循的移动路径。
该属性最初名为 motion-path。根据规范,此属性及其他所有相关的 motion-* 属性均被重命名为 offset-*。我们正在更改……
offset-path 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅其通讯。
@custom-media
CSS 的 `@custom-media` 规则允许为媒体查询创建别名。
`@custom-media` 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
@function
@function 规则用于定义 CSS 自定义函数。这些自定义函数是可重用的 CSS 代码块,可以接受参数,包含复杂的逻辑,并基于该逻辑返回值。
@function 最初由手写,并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
搜索文本
CSS 的 `::search-text` 伪元素用于选择浏览器“在页面中查找”功能中匹配到的文本。
`::search-text` 最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅他们的通讯。
适用于任何框架的 Astro Markdown 组件实用程序
在上一篇文章中,我讨论了为何以及如何使用 Astro 中的 Markdown 组件。
本文将在此基础上进一步展开,帮助您无论在何种框架中使用,都能实现 Markdown 的全局支持。因此……
Astro Markdown 组件工具:专为任意框架设计,由 CSS-Tricks 亲手编写并充满热爱地发布。您也真的应该订阅我们的通讯。
重要事项 #12:Safari 测试、::checkmark、HTML 锚点定位等
旧方法(在 Safari 中测试但手头没有 Safari 时)、新方法(::checkmark)、中间方案(使用 HTML 的锚点定位)等。
!important 是什么 #12:Safari 测试、::checkmark、HTML 锚点定位等内容最初由手写完成,并充满爱意地发布于 CSS-Tricks。你也应该订阅该通讯。
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com
使用 CSS 字母间距显示文本
在出现类似 `::nth-letter` 这样的功能之前,我们仍可以利用现有的 CSS 特性(如 `letter-spacing`、`::first-word` 和 `::first-line`)实现一些非常出色的文本效果。
使用 CSS `letter-spacing` 揭示文本,最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
人工智能时代的技术写作
这并不完全关乎人工智能。它关乎人工智能时代的技术写作。我对此有一些想法,希望正在阅读的人类朋友们觉得有帮助。
《人工智能时代的技术写作》最初由手写完成,并满怀爱意发表于 CSS-Tricks。你也应该订阅那封通讯。
跨文档视图过渡:跨越数百个元素进行扩展
页面上的每个 view-transition-name 必须是唯一的。问题在于,CSS 中的每个伪元素选择器都针对特定名称,因此你的动画样式会爆炸成难以管理的冗长选择器列表。
跨文档视图转换:跨越数百个元素进行扩展,最初由 CSS-Tricks 亲手撰写并充满爱意地发布。你也应该订阅他们的通讯。
2026 年 CSS 居中状态
尽管在线资源不计其数,但在尝试居中元素时很容易感到困惑。虽然有文档记录了解决方案,但你真的理解所选代码为何有效吗?让我们看看 2026 年当前的居中选项状态。
《2026 年 CSS 居中状态》最初由手写,并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
Stack Overflow:当我们不再提问时
看到 Stack Overflow 上的问题数量急剧下降,依然让人如遭重击。这是否意味着我们行业的学习方式正在发生变化?
Stack Overflow: When We Stop Asking 最初由手写,并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。
跨文档视图过渡:那些无人提及的陷阱
这是关于跨文档视图转换的两部分系列文章的第一部分,涵盖了所有需要注意的细节,从弃用旧方式到启用新方式,再到一个鲜为人知的 4 秒超时机制。
《跨文档视图转换:无人提及的注意事项》最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。
什么是!important #11:3D 体素场景、飞行焦点、CSS 语法及其他
如果你对可自定义样式的 3D 体素场景、飞行焦点动画或新的 CSS 语法感兴趣,那么本期《!important 是什么》绝对适合你。
《!important 是什么》第 11 期:3D 体素场景、飞行焦点、CSS 语法及其他内容,最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅这封通讯。
用 CSS 计算和显示折扣价格
巧妙利用 CSS 计算并显示折扣后的产品价格:只需提供原价和折扣金额,即可借助现代 CSS 特性(如 attr()、mod() 和 round())实现。
《CSS 中计算与显示折扣价格》一文由作者亲手编写,并满怀热情地发布于 CSS-Tricks。强烈建议订阅其通讯。
rotateX()
rotateX() 函数在三维空间中绕 x 轴旋转元素。rotateX() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
rotateY()
rotateY() 函数使元素围绕其垂直 y 轴进行旋转。
rotateY() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
rotateZ()
rotateZ() 函数使元素围绕其 z 轴进行旋转,方向可为顺时针或逆时针。
rotateZ() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
rotate()
rotate() 函数可在二维平面内使元素顺时针或逆时针旋转。
rotate() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。
“不久后,我们终于可以将 JavaScript 驱逐至 ShadowRealm"
拟议中的 ShadowRealm API 引入了一种专为隔离而设计的新类型 realm,仅此而已。
不久后,我们终于可以将 JavaScript 驱逐至 ShadowRealm。本文最初由作者亲手撰写,并充满爱意地发布于 CSS-Tricks。您也应当订阅该通讯。
为什么键盘用户不能滚动你的溢出容器
当键盘用户按 Tab 键进入表格时,焦点会落在某个单元格上。随后他们按下方向键试图横向浏览该行,但没有任何反应。屏幕阅读器用户从未注意到这个问题,因为他们导航的是无障碍树,而非滚动容器。
为何键盘用户无法滚动您的溢出容器——最初手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅我们的通讯。
使用 CSS 的 corner-shape 实现折叠角效果
我发现了 Kitty Giraudel 的折叠角技巧。最近我对角形状颇感兴趣,因此想到也可以利用角形状来创建折叠角。
使用 CSS 角形状制作折叠角,最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
2026 年母亲节送给妈妈的滚动叙事礼物
我将解释我的母亲如何启发了这次 2026 年母亲节滚动叙事实验——同时也启发了我对开发乃至生活的态度。
2026 年母亲节献给母亲的滚动叙事礼物,最初为手写,并充满爱意发布于 CSS-Tricks。你也真的应该订阅那封通讯。
Google 提示词 API
Mat Marquis 谈 Google 将网页标准层面的 U2 专辑营销方式付诸实施:
作为 Chrome 用户,您最近已收到以 4GB 传输形式提供的 Gemini Nano;无需任何授权或许可。若将其移除,
Google 的 Prompt API 最初由作者亲手编写,并满怀爱意地发布于 CSS-Tricks。您真的应该订阅该通讯。
使用网格与变换技巧制作锯齿形 CSS 布局
大多数网格布局整齐地排列成行,完美对齐,如同列阵的士兵。但有时你希望拥有更具节奏感的布局,例如之字形图案。以下是如何使用 CSS Grid 实现它的方法。
使用 Grid 与 Transform 技巧制作之字形 CSS 布局,最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。
固定高度卡:比看起来更脆弱
让多列卡片整齐对齐是我们都曾头疼的问题,而当涉及固定高度时,难度更是倍增。
固定高度卡片:看似脆弱实则复杂,最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
什么是!important #10:Canvas 中的 HTML、六边形地图、电子墨水优化等
开发者们一直在尝试 HTML-in-Canvas(一种基于六边形的世界地图分析功能)、面向电子墨水设备的 Web 操作系统、通过 content 属性替换图像源等更多技术。这就是 What's !important #10。
What's !important #10:HTML-in-Canvas、六边形地图、电子墨水优化及其他内容,最初由手写并在 CSS-Tricks 上充满爱意地发布。您真的应该订阅这份通讯。
CSS 中本地随机性的重要性
CSS 即将迎来用于生成随机数的新功能!但通往这一目标的道路漫长而曲折。
《CSS 中原生随机性的重要性》一文由我亲笔撰写,并满怀爱意发表于 CSS-Tricks。您真的应该订阅他们的通讯。
对比()
contrast() 滤镜函数可增加或减少元素的对比度。
contrast() 最初由手写并充满爱意地发布于 CSS-Tricks。您也强烈建议订阅其通讯。
对比色
contrast-color() 函数接收一个颜色值,并返回黑色或白色中与该值对比度最高的颜色。
contrast-color() 最初由手写完成,并满怀爱意地发布在 CSS-Tricks 上。你真的很应该订阅他们的通讯。
现在让我们使用不存在的 ::nth 字母选择器
我的垫片或许会让掌权者找到另一个理由声称原生支持并非必要;或者,如果大量用户在实践中采用了我的`:nth-letter` 技巧,浏览器开发者们可能会意识到真正实现它的必要性。
现在就来使用尚不存在的 `::nth-letter` 选择器。本文最初由我手写,并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。
使用 CSS 重现 Apple Vision Pro 的动画效果
测试 CSS 较新的滚动动画功能,以重现 Apple 官网中 Apple Vision Pro 头显的复杂动画效果。
该 CSS 动画最初由手写完成,并充满诚意地发布于 CSS-Tricks。强烈建议订阅他们的通讯。
使用 Markdown 组件增强 Astro
我使用 Markdown 组件主要有两个原因:(1) 减少需要编写的标记代码量;(2) 转换排版符号。以下是其工作原理。
《为 Astro 增强 Markdown 组件》一文由作者亲手撰写,并充满诚意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
Markdown + Astro = ❤️
虽然 Astro 原生支持通过 .md 文件使用 Markdown,但我认为使用 MDX 可以进一步提升你的 Markdown 体验。
Markdown + Astro = ❤️ 这篇文章最初由手写,并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。
CSS !important 规则第 9 讲:clip-path 拼图、视图转换工具包、仅名称容器等
本期《What's !important》为您带来 clip-path 拼图、视图转换工具包、仅名称容器,以及一系列其他引人注目的 Web 平台新功能概览。
《What's !important #9:clip-path 拼图、视图转换工具包、仅名称容器及其他》最初由 CSS-Tricks 亲手撰写并充满热情地发布。您真的应该订阅这份通讯。
精心设计的 JavaScript 模块系统是你首要的架构决策。
每项技术都应配有使用指南。虽然 JavaScript 模块让编写‘大型’程序变得更加容易,但如果缺乏使用它们的原理或体系,项目很容易变得难以维护。
《精心设计的 JavaScript 模块系统:你的首要架构决策》一文最初由作者手写,并充满热情地发布于 CSS-Tricks。你也应该订阅他们的通讯。
无线电状态机
CSS 状态管理中最著名的示例之一是复选框技巧。但如果我们希望一个组件处于三种、四种甚至七种不同的模式之一,这时就需要用到“单选按钮状态机”了。
“单选按钮状态机”最初是手工编写,并充满热情地发布在 CSS-Tricks 网站上。你真的很应该订阅他们的通讯。
7 个值得尝试的视图转换示例
想尝试视图过渡效果吗?Sunkanmi 提供了大量现成的通用过渡方案,您可以立即将其集成到网站中!
本文最初由 Sunkanmi 亲手撰写,并充满热情地发布于 CSS-Tricks。强烈建议您订阅其通讯。
在CSS中选择日期范围
一种巧妙的方法用于在日历中选择多个日期:利用 `:nth-child()` 选择器中"n of"语法承担主要工作……甚至包括在 JavaScript 中。
关于 CSS 颜色插值你需要知道的一切
颜色是什么?Sunkanmi Fafowora 解释了 CSS 中的一项日常任务如何用于创造更好的色彩体验。
CSS light-dark() 函数是否应该支持比亮色和暗色更多的值?
light-dark() 函数目前仅支持两种配色方案。它是否应该支持其他方案?Sunkanmi Fafowora 的回答是“是”也“否”。
CSS 电梯:纯 CSS 状态机与楼层导航
在这篇文章中,作者 Chris Sabourin 将详细介绍现代 CSS 功能如何构建一个功能齐全、交互式电梯,它能知道自己当前的位置、目的地以及到达所需的时间。无需 JavaScript。
单选按钮购物车技巧
以下是一种用于为添加到购物车的产品制作动画的方法,该方法使用了改进版的“复选框技巧”来处理无限数量的商品。
在长篇内容中发挥创意使用图片
长篇内容中的图片可以(也应该)做更多的事情,而不仅仅是插图。它们有助于设定节奏,影响读者的感受,并增添仅凭文字有时无法传达的特质。
3D分层文本:交互性和动态性
在本第三章也就是最后一章中,我们将通过添加 JavaScript 来实现交互性,从一个简单的 `:hover` 效果开始,最终实现一个响应式、会随着鼠标实时移动而产生的膨胀文本效果。
3D分层文字:动态与变化
在本章中,我们将探讨动画效果、添加过渡以及尝试不同变体的方法。我们将研究运动如何增强深度,以及细微的调整如何创造出全新的氛围。