关于 CSS 渐变的一些链接

偶尔，博客界的 zeitgiest 似乎会围绕某个特定主题聚合，就像我书签文件夹中保存的文章正在进行对话一样。 现在，那里的对话都是关于 CSS 渐变的，我想我会链接一些更有趣的文章。

• 第 22 天：圆锥形渐变 — Manuel Matuzovic 在他的关于现代 CSS 的 100 天系列的第 21 天研究了圆锥形渐变，对颜色、角度、位置和颜色停顿时进行了很好的高级概述。 然后，在 第 22 天，他将其用于 ::backdrop 伪元素。 (顺便说一下，Twitter 意外地 暂停了他的账户 - 让我们尽力纠正这个问题。)
• 你真的理解 CSS 径向渐变吗？ — Patrick Brosset 在这里做了一些值得指南的工作，我老实说还在努力完成它。 但是我已经很欣赏他对我还搞砸的事情的清晰解释和演示，比如径向渐变大小和形状的关键字。 我已经在我们自己的 CSS 渐变指南 中链接了它！
• 高度可定制的背景渐变 — 嘿，说到径向渐变，Scott Vandehey 的带有多个颜色停顿时的配方在上周广为流传。 他的挑战是创建一个可以支持不同颜色变化的渐变图案，如果没有使用 自定义属性，这通常会是一堆 CSS 类和每个变化的颜色值。 这样，他可以为不同的颜色和每个颜色停时的放置值分配一个自定义属性，然后只需根据上下文更新这些值即可。 更重要的是，自定义属性可以通过 JavaScript 更新的方式，使 Scott 能够 构建一个用于定制他的渐变图案的工具，该工具在文章结尾处被慷慨地分享。
• CSS 半色调图案 — Michelle Barker 对 Ana Tudor 的“半色调”图案进行了详细的分解。 效果有点像老式报纸的点状墨水印刷。 虽然 Ana 在幕后使用 Houdini 来实现动画和悬停效果，但 Michelle 特别关注半色调效果本身以及它如何使用径向渐变构建。 我特别喜欢 Michelle 展示如何从简单的点网格转变为图案稍微错开的网格的方式。 并坚持到最后，看看她是如何用一个 mask-image 来修饰这种效果，该效果使用线性渐变来创建一个淡出效果。 我对这种模式进行了一些改编，最终得到了一些很酷的东西，看起来像一个流淌的墨点过滤器。
• 一个很棒的导航栏解决方案 — Eric Meyer 遇到了一项有趣的菜单设计挑战，其中一条虚线从“当前页面”链接中弹出，成为内容容器左侧边缘更大虚线边框的一部分。 Eric 始终是 如何像前端开发人员一样思考 的绝佳榜样，他在这里做到了这一点，因为他描述了他在遇到标准方法的障碍时采取的替代路线，即在元素上设置 border-style: dotted。
• 掩盖渐变虚线 — Eric 接着上面那个链接，展示了如何将左侧边框的虚线连接到栅格图像的虚线，以及他那挑剔的设计眼光如何说服他改变解决方案，使用两个重复的线性背景渐变作为背景渐变上的 mask-image 来模仿图像虚线的较低分辨率。 太书呆子气了，太棒了！