AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner

AI 摘要：这篇文章介绍了如何利用 SVG 的 pathLength 属性简化路径动画管理流程。作者先讲解一个常见的“签名动画”，传统方法需用 JavaScript 计算路径长度 (getTotalLength)，再展示通过手动设置 pathLength，可以让 CSS 动画以固定比例管理 stroke-dasharray 和 stroke-dashoffset，从而更直观地控制动画节奏，减少依赖 JS 的复杂度。

1. SVG 路径动画的常见方法
• 介绍一种常见的“签名动画”效果，用 stroke-dasharray 和 stroke-dashoffset 实现路径绘制。
• 讲解 stroke-dasharray 如何将路径“切割”为可见段与间隔。
• 通过调整 stroke-dashoffset 实现路径显现动画。

2. 路径总长度的计算与问题
• 在未指定 pathLength 前，需要从 JavaScript 中调用 getTotalLength() 获取路径总长度。
• 此过程为实现动画添加了额外步骤，且维护成本高。

3. pathLength 属性的妙用
• 介绍 pathLength 属性：可直接在 SVG 标签上定义路径的理论总长度。
• 设置 pathLength="100" 后，可以将动画参数基于此比例统一规划。
• 配合 CSS 的 transition，让路径动画以百分比方式更易管理。

4. 优化效果与开发体验
• 使用 pathLength 后的代码更简洁、可读性更强。
• 动画更容易调节且不需依赖 JavaScript。
• 作者总结自己对新方法的偏爱并鼓励读者试用。

Stefanjudis

pathLength makes makes SVG path animations easier to manage

Use the "pathLength` attribute to make animating "stroke-dasharray" and "stroke-dashoffset" easier.

AI 摘要：文章介绍了使用 SVG 动画 作为 GIF 动画 替代方案的优势。与 GIF 相比，SVG 动画文件体积更小、分辨率无损放大、与部分 CSS 媒体查询兼容，还可以直接嵌入 img 标签或作为背景图使用。但也存在局限：如不支持 prefers-reduced-motion、无法触发交互事件（hover/click）、限制 JavaScript 等。整体上，SVG 动画是 GIF 的现代替代，尤其适用于形状移动或变换类动画，性能和画质优势明显。

Frontend Masters

Replace Your Animated GIFs with SVGs

No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don’t even see the dancing hamster. Your other tab has already loaded and you’ve followed the dopamine hits down another social media rabbit hole.

Tom Miller takes inspiration from a rainbow of crayon colors by wearepretendfriends for this brilliant GSAP-fueled SVG animation.
Tom Miller 从 wearepretendfriends 的彩虹蜡笔颜色中汲取灵感，制作了这个精彩的 GSAP 驱动的 SVG 动画。

AI 摘要：这篇文章深入探讨了 SVG 的 <path> 元素，详细介绍了如何使用该元素绘制各种形状，尤其是 Bézier 曲线和弧形。文章通过示例和解释帮助读者建立对路径语法的直观理解，适合希望提升其 SVG 绘图技能的开发者。

1. 基本概念
• SVG <path> 元素类似于矢量图形软件中的“笔”工具，可以连接多个绘图指令。
• d 属性定义了一系列绘图指令，每个指令通过不同的命令（如 M、L）来实现。

2. 基本命令
• 移动命令 (M)**：用于将笔移动到画布的特定位置，不会绘制任何线条。
• 直线命令 (L)：用于绘制从当前点到指定点的直线。
• **Bézier 曲线: 包括二次 (Q) 和三次 (C) Bézier 曲线，分别使用一个和两个控制点绘制平滑曲线。

3. 弧形 (Arcs)
• 弧的复杂性：弧的绘制涉及到多个参数，掌握其用途对于理解如何连线至关重要。
• 半径控制：水平和垂直半径影响着绘制的椭圆形状的深度和外观。
• 弧形路径选择：通过大弧标志和扫掠标志选择路径方向。

4. 动画与额外功能
• 提到了动画技术的学习课程，并介绍了路径闭合命令 (Z) 和相对命令 (小写字母形式)。
• 文章总结了一些常用的命令和其语法，帮助开发者更轻松地创建复杂的 SVG 图形。

Joshwcomeau

An Interactive Guide to SVG Paths • Josh W. Comeau

SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of…

AI 摘要：本文是 Josh W. Comeau 撰写的一篇关于 SVG（可缩放矢量图形）的入门教程，旨在为读者提供 SVG 的基础知识和实用技巧。文章从 SVG 的基本概念入手，介绍了其作为图像格式的独特之处（如基于 XML 的语法和与 DOM 的无缝集成），并深入探讨了 SVG 的基本形状、缩放机制、表现属性以及动画效果。通过详细的代码示例和互动演示，作者展示了如何利用 SVG 创建动态插图，并结合 CSS 和 JavaScript 实现交互效果。文章还提到作者正在开发的动画课程，邀请读者关注后续更新。

Joshwcomeau

A Friendly Introduction to SVG • Josh W. Comeau

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…

AI 摘要：本文内容涵盖了前端开发的最新动态、技术技巧和资源分享。文章重点介绍了 CSS 自定义高亮 API、表单控件样式的未来改进、ARIA 辅助技术的使用、TypeScript 的 satisfies 关键字、SVG 滤镜效果等多个技术话题。此外，还分享了有趣的项目、工具以及作者对代码注释和工作恐惧的思考，旨在为读者提供有价值的行业资讯和学习资源。

Stefanjudis

Web Weekly #162

The CSS Custom Highlight API, new ways to style form controls, and things to know about ARIA.

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文涵盖了前端开发的多个热门话题和技术更新，包括 CSS 滚动驱动动画、Web 机器人检测技术、Web 可访问性、Astro 5.10 发布、Firefox 140.0 新功能，以及多种 CSS 技术和工具资源。文章通过教程、工具介绍和行业动态，为前端开发者提供了丰富的学习和实践资源。

1. CSS 滚动驱动动画指南 - Saron Yitbarek
• 介绍了如何使用 CSS 的 scroll() 和 view() 函数实现滚动驱动动画，无需 JavaScript。
• 提供了代码示例，展示如何创建进度条或将元素动画效果引入视口。
• 强调了可访问性和运动敏感性考虑。
2. Web 机器人与检测技术简史 - OlegWock
• 概述了 Web 机器人与检测技术之间的“猫鼠游戏”。
• 探讨了机器人演变、IP 声誉、指纹识别、无头浏览器漏洞、代理检测、CAPTCHA 和行为分析等技术。
3. Astro 5.10 发布
• 重点介绍了 Astro 的响应式图片功能已正式上线。
• 新增实验性实时动态内容获取功能，并改进了 CSP 支持。
4. Firefox 140.0 新功能与更新
• 介绍了 Firefox 最新版本新增的垂直标签功能。
• 支持自定义高亮 API 和 SVG fetchpriority 属性等。
5. 简讯（IN BRIEF）
• JSON 模块脚本现已作为 Baseline 新功能可用。
• Mozilla 更新了 Firefox 插件政策，将于 8 月生效。
• 2025 年 CSS 状态调查仅剩一周时间完成。
6. 文章、观点与教程
• CSS 中的 Liquid Glass 设计 - Pup Atlas：实现了 Apple 的 Liquid Glass 设计语言，但兼容性较差，属于有趣的实验。
• Chrome 137 中 CSS if 函数初探 - Sunkanmi Fafowora：探讨了该函数的语法、工作原理及与其他属性的结合应用。
• CSS 层级、BEM 与工具类：特异性控制 - Victor Ayomipo：分析 CSS 特异性问题，避免使用 !important 标记。
• JPEG 如何成为互联网图像标准 - Ernie Smith：回顾 JPEG 格式 30 年来的历史及影响。
• 实现内联文档查看器的经验教训 - Anjali Munasinghe：分享项目实施中的经验。
• 使用 Three.js、GSAP 和 Web Audio API 编码 3D 音频可视化器 - Filip Zrnzevic：技术实现教程。
7. 工具、代码与资源
• Mossaik - Gabriel Perales：基于 Web 的工具，用于创建 SVG 背景，支持多种形状和自定义设置。 #svg #tools
• <syntax-highlight>：自定义元素，利用 CSS 自定义高亮 API 实现语法高亮。
• Browser MCP：连接 AI 应用到浏览器，自动化测试和任务，支持 VS Code、Claude 等工具。
• Contrast Report：WCAG 颜色对比检查工具，支持分享链接和颜色选择功能。
• Text to SVG：将文本转换为 SVG 路径的工具。
• SlimImg：浏览器内图像压缩工具。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

"它并不完美，但平台也不是。我们依然爱它。" Jhey Tompkins 用他对于 WWDC25 中最受喜爱/最厌恶的事物——液态玻璃的演绎，满足了人们的需求。

AI 摘要：本文主要聚焦于前端开发领域的最新动态和技术更新，尤其关注 WWDC25 带来的 Safari 26 新特性，如 SVG 图标支持、CSS 锚点定位和滚动驱动动画等。同时，文章涵盖了其他前端技术话题，如 contrast-color() 函数、Temporal JS API、响应式图片优化等，并分享了作者对技术趋势和行业现状的个人见解。整体内容旨在为读者提供前沿技术资讯、实用技巧和有趣的资源推荐。

1. Safari 26 新特性（WWDC25 亮点）
• SVG 图标支持：Safari 终于支持 SVG 作为 favicon，标志着“favicon 乱象”的终结，尽管相比其他浏览器晚了数年。
• CSS 锚点定位：介绍 CSS anchor positioning 功能，适用于工具提示和弹出框，Chromium 和 Webkit 已支持，Oddbird 提供了 polyfill。
• 滚动驱动动画：Safari 跟进 Chromium 支持 scroll-driven animations，Firefox 部分支持，作者推荐 Bramus 的免费课程学习相关技术。
• 其他小更新：包括 JS 小幅改进、text-wrap: pretty、contrast-color()、margin-trim 和 progress() 等 CSS 新特性。
• Safari 现状反思：尽管有进步，Safari 在 Web 平台测试中仍有较多失败案例，作者质疑其是否能摆脱“新 IE”的标签。

2. 技术热点与资源
• State of CSS 调查：鼓励读者参与年度 CSS 调查以了解新趋势。
• Import Maps 更新：Shopify 推动了 import maps 规范变更，解决了模块加载和单一 map 限制问题，已在 Chromium 和 Webkit 实现。
• Contrast-color() 函数：Safari 支持该函数，但仅限于黑白对比，作者讨论其局限性并推荐相关阅读。
• Optional Chaining 争议：作者对过度使用可选链 (?.) 提出质疑，认为频繁检查属性存在性可能是代码异味。

3. 有趣项目与工具
• Internet Roadtrip：一个由 Neal 开发的公路旅行，和互联网陌生人共同决定目的地。到目前为止已行驶 3000 多英里
• Temporal JS API：Firefox 率先支持 Temporal，改善了 JavaScript 日期处理体验。
• TypeScript Prettify：介绍一个提高 TypeScript 类型可读性的技巧。
• 响应式图片优化：为响应式图像编写正确的标记是很困难的，推荐一个响应式图片 linter 工具。
• 框架渲染方式：Ryan Carniato 讲解了 React、Vue 等框架的 DOM 渲染方法。
• Text-box 属性：介绍 MDN 上的 text-box 属性，用于未来文本垂直对齐。

4. 实用技巧与工具推荐
• 预加载响应式图片：通过旧的 link 元素预加载图片的技巧。
• 三个开源项目：包括 gron（命令行工具，转换 JSON 使其易于使用 grep 等工具进行搜索）、tweety（浏览器集成终端）和 parrot.live（终端动画）。
• CSS Shape 工具：介绍一个将 SVG 路径转换为 CSS shape() 的在线工具。

Stefanjudis

Web Weekly #160

Preloading responsive images, CSS `contrast-color()` and the long-awaited `Temporal` JS API.

AI 摘要：本文由 Myriam Frisano 撰写，深入探讨了 SVG 中最强大的元素 <path> 的基础知识，重点介绍了直线和角度路径的命令。作者通过简单的示例和可视化工具，帮助读者理解 SVG <path> 元素的语法和规则，旨在让读者能够将 SVG 语义标签转化为 <path> 所能理解的语言。本文是两部分系列文章的第一篇，涵盖了直线命令的基础知识，并为后续的曲线和弧线内容奠定了基础。

1. 引言与背景：
• 介绍了 SVG 的基础知识，指出 <path> 元素虽然复杂，但却是 SVG 中最强大的元素。
• 强调 <path> 在技术绘图和数据可视化中的重要性，并建议初学者先掌握 SVG 基础元素（如 rect、line 等）再深入学习 <path>。

2. 学习前提与文章结构：
• 建议读者熟悉 SVG 的 viewBox 和基础元素语法，推荐先阅读作者之前的入门指南。
• 文章使用 JavaScript 编写代码，注重代码的可读性，通过命名坐标和简化数学计算来降低理解难度。

3. 成功设置：可视化辅助：
• 提供了一个可视化的 viewBox 网格，帮助读者理解坐标和路径命令的关系。
• 强调在 SVG 中添加文本时的可访问性问题，建议在实际项目中优先使用 HTML 渲染文本。

4. 进入 <path> 及其强大的 d 属性：
• 介绍了 <path> 元素的 d 属性，它使用特定的命令语言来定义路径形状。
• 指出非路径元素（如 line、rect）本质上是预定义的路径，而 <path> 需要开发者手动定义形状逻辑。

5. 起点命令：M：
• M 命令用于移动画笔到指定起点，仅设置位置而不绘制任何内容。
• 接受 x 和 y 坐标作为参数，是每个路径的起点。

6. 基础直线命令：M, L, H, V：
• L 命令绘制从当前点到指定点的直线，接受 x 和 y 坐标。
• H 和 V 命令分别绘制水平和垂直线，仅需指定一个坐标（另一个坐标由当前点推导）。
• 通过示例和 CodePen 演示，展示了这些命令的实际效果，并与 <line> 元素进行对比，突出 <path> 的高效性。

7. 使用 Z 命令创建多边形和折线：
• 介绍了 Z 命令，用于闭合路径，类似 <polygon> 元素的效果。
• 通过示例展示了如何使用 <path> 替代 <polyline> 和 <polygon>，并讨论了代码可读性的问题。

8. 相对命令：m, l, h, v：
• 解释了小写命令（如 m, l）表示相对坐标，相对于上一个点的偏移量。
• 通过示例对比绝对和相对命令的优缺点，指出两者各有适用场景。

9. 跳转点：复合路径：
• 介绍了复合路径的概念，利用多个 M 命令实现路径跳转，减少代码冗余。
• 示例展示了如何用单个 <path> 元素绘制网格，替代多个 <line> 元素。

10. 后续内容预告
• 预告了下一篇文章将讨论曲线和弧线命令，进一步扩展 <path> 元素的功能。
• 列举了 Smashing Magazine 上其他相关文章，涵盖 SVG 弧线、无障碍性 SVG 定制和动画等主题。

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

AI 摘要： 本期 Frontend Focus 第 696 期（2025年6月11日）聚焦于苹果 WWDC 2025 开发者大会的最新动态，特别介绍了 Safari 26 Beta 版本的新功能与改进，同时涵盖了 CSS 领域的最新技术和工具。此外，文章还提供了丰富的教程、工具和资源，内容涉及 CSS 新特性、网页打印优化、UI 组件开发等多个前端开发热点话题，旨在帮助开发者紧跟技术趋势并提升实践能力。

WWDC 2025 更新
• 主题演讲：WWDC 2025 主题演讲时长约一个半小时，内容偏向概述，开发者细节较少，可通过 The Verge 的 10 分钟精剪版快速了解，或观看更深入的 State of the Union 更新。
• Safari 26 Beta 与 WebKit 新功能：Safari 版本号从 18 跳跃至 26，与苹果操作系统版本号一致，带来了 60 多项新功能和 100 多项改进，包括 WebGPU 支持、锚点定位、滚动驱动动画等；同时提供近 40 分钟视频，详细讲解 CSS 新特性及音视频、图像、图标等媒体支持。
• 声明式 Web Push：通过 20 分钟视频讲解声明式 Web Push 的工作原理，如何基于现有标准构建通知功能，并保持向后兼容性。

文章、观点与教程
• 部分关键帧动画技巧：Josh W. Comeau 分享了创建动态、可组合关键帧动画的技巧，讲解清晰且注重可访问性。
• CSS contrast-color() 函数探讨：Daniel Schwarz 分析该函数在 Web 可访问性方面的现状、局限性及未来改进方向。
• Scroll-Driven Letter Grid：Chris Coyier 介绍一种利用可变字体随滚动变化的技术，但受限于浏览器支持，Safari 和 Firefox 暂不支持。
• Jen Simmons 谈新 CSS 特性：WebKit 团队的 Jen Simmons 讨论声明式 Web Push、表单控件样式、排版及 contrast-color() 等新特性。
• SVG path 元素解析：Myriam Frisano 讲解 SVG <path> 元素基础及其复杂命令，附带示例和可视化内容。
• Printing the web: making webpages look good on paper：Declan Chidlow 探讨如何通过 CSS 优化网页打印效果，打造整洁易读的文档。
• 其他教程：包括快速部署个人作品集网站、HTML 弹出通知自动关闭、CSS 与 JavaScript 粘性元素代码片段等内容。

工具、代码与资源
• SF Symbols 7：苹果图标库更新至 Beta 版，新增数百符号，总数接近 7000 个。
• Astro 5.9 发布：新增内容安全策略实验支持及 Markdown 渲染辅助函数。
• Storybook 9 更新：UI 组件工具新增交互、视觉和可访问性测试功能，支持 React、Svelte 等多种框架。
• Spectral.js 颜色混合库：基于 Kubelka-Munk 理论实现更接近颜料混合的颜色过渡效果。 #color
• 其他工具：包括 Smooothy 滑块组件、Fulldev UI 内容驱动网站组件库、SmoothUI 动画组件等。

AI 摘要：本文详细探讨了如何通过 CSS 和 SVG 技术解决渐变背景中常见的 banding（色带）问题。作者回顾了过去复杂的解决方案，并提出了一种更优的方法，即使用 SVG 滤镜和位移映射（displacement map）技术来创建颗粒状渐变效果，同时避免改变原始渐变的颜色属性。文章还讨论了当前方法的局限性以及未来改进的可能性，例如使用 filter() 函数直接对渐变背景应用滤镜，并通过多个示例展示了颗粒效果在不同场景中的应用。

1. 引言与问题背景：文章首先介绍了渐变背景或渐变蒙版中常见的 banding 效应，通过示例图片直观展示了这一问题，强调了解决此问题的必要性。
以往解决方案的不足：
• 增加渐变停止点（Easing）：通过添加更多颜色停止点来缓解 banding，但作者认为此方法不够理想。
• 叠加噪声层：早期方法通过伪元素叠加渐变层和噪声层并混合，但这种方法复杂且效果不佳。
• 改进后的叠加方式：后续尝试通过透明渐变末端显示噪声层，但仍存在复杂性和颜色失真的问题。
• SVG 滤镜初步尝试：作者在第二段视频中提出使用 SVG 滤镜生成噪声并叠加到渐变上，但仍不满意此方案。
• 叠加噪声与渐变的核心问题：所有叠加方法都会改变原始渐变的亮度、饱和度等属性，降低噪声透明度则会减少颗粒效果，影响解决 banding 的效率。

2. 更优解决方案：位移映射
• 原理说明：使用噪声层作为位移映射，通过 RGBA 通道值决定渐变像素在 x 和 y 轴上的偏移，避免直接叠加噪声改变颜色。
• 代码实现：通过 SVG 滤镜（feTurbulence 和 feDisplacementMap）生成噪声并应用位移效果，详细解释了滤镜参数和 CSS 布局处理。
• 问题修复：解决滤镜应用后边界内透明像素和边界外不透明像素的问题，使用 feBlend 和滤镜区域限制（或 clip-path）来优化结果。

3. 当前方案的问题与临时解决方案：
• 滤镜影响整个元素：滤镜会影响元素的所有内容（如文本、阴影），导致不希望看到的效果。
• 解决方法：通过伪元素分离渐变背景并应用滤镜，避免影响其他内容，提供了具体的 CSS 代码实现。

4. 未来改进方向：
• 使用 filter() 函数：提出直接对背景渐变应用滤镜的理想方法，简化代码，但目前仅 Safari 支持，呼吁其他浏览器实现此功能。
• 应用场景扩展：特别提到在蒙版渐变（如径向渐变蒙版）中应用颗粒滤镜的潜力，并讨论了跨浏览器兼容性问题和临时替代方案。

5. 更多示例：
• 颗粒状图像阴影：展示如何通过复杂滤镜创建颗粒状阴影效果，解决阴影边缘的 banding 问题。
• 颗粒状图像渐变淡出：通过位移半透明边缘像素实现颗粒状淡出效果。
• 噪声渐变圆盘：利用 SVG 径向渐变和滤镜创建独特的颗粒效果。
• 动画渐变发光边框：在流行的渐变发光边框中应用颗粒效果，提升视觉效果。
• 颗粒状 CSS 背景：通过多层线性渐变模拟网格渐变，并应用颗粒滤镜解决 banding。
• 颗粒状 SVG 背景：通过叠加不同形状和渐变填充的 SVG 元素，模糊并应用颗粒滤镜，创造抽象背景效果。

Frontend Masters

Grainy Gradients

You know when you set a background gradient or a gradient mask and you get an ugly banding effect? If you can’t picture what I mean, here’s an example: