每隔一段时间,博客时代似乎都会围绕某个主题合并,就像我书签文件夹中保存的文章正在进行对话一样。 现在坐在那里的谈话都是关于 CSS Gradients 的,我想我会链接一些更有趣的部分。
- 第 22 天:圆锥梯度 — Manuel Matuzovic 在他关于现代 CSS 的 21 天系列的第 100 天查看了圆锥渐变,提供了对颜色、角度、位置和色标的良好高级视图。 然后,在 第22天,他把它用在
::backdrop
伪元素。 (顺便说一下,推特出乎意料 暂停他的帐户 ——如果可以的话,让我们帮助修复那艘船。) - 你真的了解 CSS 径向渐变吗? - 帕特里克·布罗塞特 在这里完成了值得指导的工作,老实说,我仍在努力完成它。 但我已经很欣赏他对我仍然掩盖的事情的清晰解释和演示,比如径向渐变的大小和形状的关键字。 我已经在我们自己的链接中 CSS渐变指南!
- 高度可定制的背景渐变 — 嘿,说到径向渐变, 斯科特·范德海上周推出了一种带有多个颜色停止的配方。 他的挑战是创建一个可以支持不同颜色变化的渐变模式,如果不使用,这通常会是 CSS 类和每个变化的颜色值的混乱 自定义属性. 这样,他可以为每个色标的不同颜色和位置值分配自定义属性,然后根据上下文简单地更新值。 更重要的是,使用 JavaScript 更新自定义属性的方式让 Scott 能够 建立一个工具来定制他的渐变图案,在帖子末尾慷慨分享。
- CSS 半色调模式 - 米歇尔·巴克 详细分析了 Ana Tudor 的“半色调”图案。 效果有点像老式学校报纸的点墨打印。 而安娜使用 胡迪尼 在动画和悬停效果的幕后,Michelle 专门研究了半色调效果本身以及它是如何使用径向渐变构建的。 我特别喜欢 Michelle 展示如何从简单的点网格到图案稍微交错的网格的方式。 并坚持到最后,看看她是如何用
mask-image
它使用线性渐变来创建渐变效果。 我对这种模式有点重复,最后得到了一些看起来像流动墨水过滤器的整洁的东西。 - 出色的导航栏解决方案 — Eric Meyer 获得了一个有趣的菜单设计挑战,其中虚线从“当前页面”链接出来,并成为内容容器左边缘较大虚线边框的一部分。 埃里克总是一个很好的例子 如何像前端开发人员一样思考,他在这里这样做是因为他描述了他在使用标准设置方法遇到障碍时使用线性渐变所采取的替代路线
border-style: dotted
在元素上。 - 蒙版渐变虚线 — Eric 对最后一个链接进行了跟进,不仅展示了他如何将左边框的虚线连接到光栅图像的虚线,还展示了他挑剔的设计眼光如何说服他改变解决方案以模仿较低分辨率的图像的破折号使用两个重复的线性背景渐变作为
mask-image
在背景渐变上。 如此书呆子和伟大!