有关CSS梯度的一些链接

最近，博客圈似乎对CSS渐变这个话题格外关注，我的书签里相关的文章也热闹了起来。正好借此机会，整理分享一些我觉得比较有意思的文章链接。

• 圆锥渐变 (conic gradients) — Manuel Matuzovic在他为期100天的现代CSS系列文章中，第21天介绍了圆锥渐变，深入浅出地讲解了颜色、角度、位置和颜色停止点等方面。第22天，他又将它应用于::backdrop伪元素。(顺便说一句，Twitter意外地封禁了他的账号——如果可以的话，让我们一起帮助他恢复账号吧。)
• 你真的理解CSS径向渐变吗？ — Patrick Brosset 的这篇文章堪称指南级作品，我还在仔细研读中。但我已经欣赏到他清晰的解释和演示，这些演示解答了我一直以来对径向渐变大小和形状关键词的困惑。我已经将这篇文章链接到我们自己的CSS渐变指南中了！
• 高度可定制的背景渐变 — 说到径向渐变，Scott Vandehey 上周分享的多色停点的径向渐变方案广为流传。他的挑战是创建一个支持不同颜色变化的渐变图案，如果没有使用自定义属性，通常需要为每个变化创建大量的CSS类和颜色值，这将是一团糟。通过这种方式，他可以为不同的颜色和每个颜色停止点的位置值分配一个自定义属性，然后根据上下文简单地更新这些值。更重要的是，自定义属性可以通过JavaScript更新，这使得Scott能够构建一个定制渐变图案的工具，并在文章结尾慷慨地分享了这个工具。
• CSS半色调图案 — Michelle Barker 对Ana Tudor的“半色调”图案进行了详细的分解。这种效果有点像老式报纸的点状墨水印刷。虽然Ana在底层使用了Houdini进行动画和悬停效果，但Michelle特别关注半色调效果本身以及它是如何用径向渐变构建的。我尤其喜欢Michelle展示如何从简单的点阵过渡到图案稍微错开的点阵的方式。文章最后还展示了如何使用线性渐变作为遮罩图像来创建淡出效果。我也尝试了一下这种图案，最终得到了一些看起来像模糊墨迹滤镜的有趣效果。
• 一个漂亮的导航栏解决方案 — Eric Meyer 面临着一个有趣的菜单设计挑战，需要从“当前页面”链接中伸出一条虚线，并成为内容容器左侧边缘较大的虚线边框的一部分。Eric 总是如何像前端开发人员一样思考的绝佳例子，他在这里也做到了这一点，因为他描述了当他在使用元素设置border-style: dotted的标准方法时遇到障碍时，他采用的替代方案——使用线性渐变。
• 带遮罩渐变的虚线 — Eric 对上一篇文章进行了补充，不仅展示了如何将左侧边框的虚线连接到光栅图像的虚线，还展示了他如何通过使用两个重复的线性背景渐变作为背景渐变的遮罩图像来模仿图像虚线的较低分辨率，从而完善了他的设计。太棒了！

以上是有关CSS梯度的一些链接的详细内容。更多信息请关注PHP中文网其他相关文章！