#优质博文 #前端 #设计还原 #css #设计 #兼容性
讲究，太讲究了www
Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

AI 摘要：本文详细探讨了在 CSS、Android、iOS、Figma 和 Sketch 等多个平台和设计工具中实现一致的阴影效果（drop shadow）的问题。作者通过对比不同平台的阴影渲染差异，指出模糊半径（blur radius）的处理方式是导致不一致的主要原因，并提供了具体的缩放因子（scale factors）来调整模糊半径，以实现跨平台的视觉一致性。文章还深入分析了各平台的渲染机制和技术细节，为设计师和开发者提供了实用的转换公式和指导。

1. 引言与问题背景
• 介绍了跨平台阴影效果不一致的问题，通过图片对比展示了 CSS、Android 和 iOS 渲染相同阴影参数时的差异（例如 Y 偏移 24px，模糊半径 24px 的阴影在各平台呈现不同）。
• 指出 Android 使用 setShadowLayer 而非 Material elevation，CSS 和 Android 阴影虽接近但仍有细微差异（Android 更模糊）。

2. 浏览器间的阴影一致性
• 讨论了 CSS 阴影在不同浏览器（Safari、Firefox、Chrome）中的表现，发现 box-shadow 在这些浏览器中渲染效果基本一致，截图以 Safari 为主。

3. 设计工具与 CSS 的对比
• 指出 CSS、Sketch 和 Figma 的阴影效果一致，但背景模糊（background blur）不在本文讨论范围内，仅聚焦于阴影效果。

4. 模糊半径的差异分析
• 阴影的参数中，位置偏移和颜色在各平台表现一致，唯独模糊半径的处理方式不同。
• 作者通过重新排列模糊测试结果，发现模糊半径存在 1×、2× 和 3× 的缩放模式，阴影主要集中在 1× 和 2× 范围内。

5. 缩放因子与技术细节
• 解释了 CSS 规范中模糊半径的标准差为模糊半径的一半，而 iOS 的模糊半径是 CSS 的两倍，因此 CSS 到 iOS 的缩放因子为 0.5×。
• Android 使用 Skia 渲染，模糊半径缩放涉及 1 / sqrt(3) 的因子，与 CSS 不完全一致（部分原因是早期 Safari 的影响）。
• 提供了详细的缩放因子表格，用于在 CSS、Sketch、Figma、Android 和 iOS 之间转换模糊半径，例如 CSS 到 Android 为 0.866×，iOS 到 CSS 为 2.0×。
• 通过调整后的对比图和色调分离（posterising）结果，展示了缩放后的阴影效果非常接近，尽管由于渲染方法和代码差异无法完全一致。

6. 应用与结论
• 研究目的是为 Pinwheel 工具导出 Android 和 iOS 阴影代码时提供正确的缩放因子，确保跨平台一致性。
• 总结了实现近似一致阴影的可行性，并感谢 Kit Grose 在审稿中提供的 Skia 代码注释支持。

author Bjango Team

Bjango

Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.

#优质博文 #前端 #兼容性 #video #编解码 #视频
How to use transparent videos on the web in 2025

AI 摘要：本文详细介绍了在网页中嵌入透明视频的技术挑战与实现方法。尽管透明视频在网页设计中具有巨大潜力（如叠加内容、动态形状变化等），但由于浏览器兼容性问题（Chrome 支持 VP9 格式，Safari 支持 HEVC 格式），开发者需提供多格式视频并动态适配。文章提出两种方案：
• 简易方案：通过合成视频与背景颜色模拟透明效果（如 Typeform 的案例），适用于背景抽象的场景。
• 真实方案：分别导出 HEVC（Safari）和 VP9（Chrome）格式的透明视频，通过 <video> 标签的多源加载实现跨浏览器兼容。
此外，文章还提供了视频转换工具（如 Rotato Converter、FFmpeg）的具体操作指南和代码示例。

1. 透明视频在网页中的应用潜力
• 透明视频（带Alpha通道）可实现创意效果，例如：
• 在HTML内容上方叠加视频
• 在另一个视频上叠加播放
• 动态改变视频形状
• 打破传统视频的“方框”外观，与页面内容自然融合

2. 当前技术挑战
• 浏览器兼容性问题：
• Safari支持HEVC/H.265格式的透明视频，但不支持VP9/WebM的透明通道。
• Chrome支持VP9/WebM的透明视频，但不支持HEVC的透明通道。
• 需同时提供两种格式以覆盖主流浏览器。

3. 实现透明视频的两种方法
• 简易方法（“障眼法”）：
• 适用于背景为纯色或抽象动态的场景。
• 将前景视频与背景视频合并为单一文件，通过颜色匹配模拟透明效果（如Typeform的案例）。
• 标准方法（真实透明通道）：
• 需分别导出HEVC（.mov）和VP9（.webm）格式的视频文件。
• 使用HTML5 <video>标签嵌套多个<source>，让浏览器自动选择兼容格式。

4. 视频转换工具与步骤
• 工具推荐：
• Rotato Converter：免费工具，一键转换HEVC和VP9格式。
• FFmpeg：命令行工具，支持高级参数调整（如CRF控制质量/大小）。
• 转换步骤：
1. 从编辑软件（如Rotato、Premiere）导出带Alpha通道的原始视频（建议720p）。
2. 转换为HEVC（Safari兼容）和VP9（Chrome兼容）。
3. 调整参数（如-crf控制压缩质量，-preset影响编码速度）。

6. 关键注意事项
• 文件大小优化：透明视频文件较大，需平衡质量与加载速度。
• 测试验证：在不同浏览器中检查透明效果是否生效。

author Morten Just

rotato.app

How to use transparent videos on the web in 2025 - Rotato | Rotato

Despite what many believe, it's possible to use transparent videos in html, but it's not obvious how to do it - in Chrome and Safari, and the rest

#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性

在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。

这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。

3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685

Chrome for Developers

现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers

界面保持不变，焕然一新。