深圳建网建网站,福州网站建设方案咨询,校园门户网站系统建设关键技术,来年做哪个网站致富当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 13 章 渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点#xff08;上#xff09;13.1.2 颜色插值方法#xff08;中#xff09; ✔️13.1… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 13 章 渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点上13.1.2 颜色插值方法中 ✔️13.1.3 径向渐变下13.1.4 锥形渐变下 文章目录 13.1.2 颜色插值方法 Color interpolation13.1.2.1 极坐标色彩空间下的高级设置 More options in polar color spaces13.1.2.2 浏览器 Bug 与颜色问题 Browser bugs and color quirks 《CSS in Depth》新版封面 译者按 本篇又是第二版全新增补的崭新内容充分体现了新版 CSS 颜色语法在渐变设置中的灵活应用。时隔不到半年书中提到的浏览器兼容问题已经成为了历史足见这些新特性的受欢迎程度。本书虽未涉及色彩空间的底层插值算法理论实际也用不上但作者聚焦实战的讲解思路和业内最佳实践的倾囊相授已经足以应对今后绝大多数的 CSS 渐变应用场景并助您在团队中脱颖而出。 13.1.2 颜色插值方法 Color interpolation
在第 11 章中我们学习了 CSS 颜色的各种表示方法以及色彩空间方面的知识。就在前不久浏览器对渐变效果的计算都还仅限于 sRGB 色彩空间如今使用其他色彩空间来设置渐变已经成为了人们新的选择。在色彩渐变过程中浏览器对于中间色的计算结果很可能会因为所选色彩空间的不同而存在显著差异。因为在不同的色彩空间中色彩的几何排布情况各不相同从而导致一个色彩空间中两个颜色点之间的颜色与另一个色彩空间截然不同。
图 13.6 给出了两个示例渐变效果。它们都是从左侧的黄色过渡到右侧的蓝色但由于分属不同的色彩空间用到的插值算法也不同从而导致了风格迥异的中间渐变色效果。 【图 13.6 色彩空间截然不同的两种渐变效果可能存在显著差异】
在本例中sRGB 色彩空间下的渐变设置会在其中心区域穿过某个灰色区间这在 RGB 相关的颜色理论支撑下是解释得通的。黄色 yellow 的 RGB 颜色值为 rgb(255 255 0)而蓝色 blue 的值为 rgb(0 0 255)。如果每个参数维度都按线性插值计算则会在渐变的中心位置得到一个红、绿、蓝分量皆为 127.5 的过渡色即本例中的灰色有时也被称为 “灰色死区gray dead zone 1”。在 sRGB 色彩空间下位于色轮color wheel 2对侧或大致对侧的任意两种颜色在设置渐变效果时都会看到类似的结果其渐变色必将穿过色轮中间的灰色地带。
另一方面黄色和蓝色在 OKLCH 色彩空间下可以分别表示为 oklch(97% 0.21 110deg) 和 oklch(45% 0.31 264deg)。此时的渐变计算主要是将色调的角度由 110 度变为 264 度渐变色依次穿过绿色green、青色teal及蓝绿色cyan。与 sRGB 时直接穿过色轮的中心区域不同OKLCH 色彩空间下的颜色渐变会绕道而行留下沿途经过的各种中间色。 警告 在 CSS 渐变中指定色彩空间仍是一个相对较新的功能特性。截至 2024 年年中Firefox 尚未提供相应支持。因此在启用该特性时还应该准备一个回退版的渐变设置以适应不支持该特性的应用场景。 译注 截至 2024 年 12 月 16 日根据 Can I Use 网站最新的统计数据Firefox 等主流浏览器厂家已经全面支持渐变的色彩空间插值算法目前的综合普及率已达 91.53%线性、径向、锥形及其重复渐变版本的统计结果均保持一致 【补图1各主流浏览器厂家已全面支持 CSS 渐变的色彩空间插值算法截至 2024 年 12 月 16 日】 在渐变中手动指定颜色空间的具体写法如代码清单 13.7 所示。这里为 Firefox 及其他老版本浏览器预备了一个回退方案。注意观察我们在 linear-gradient() 函数的第一个参数中添加了一个关键词 in oklch。根据下列代码同步更新样式表
代码清单 13.7 指定色彩空间为 OKLCH 的 CSS 渐变写法示例
.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, yellow, blue); /* 老版本浏览器的回退方案 */background-image: linear-gradient(90deg in oklch, yellow, blue); /* 指明色彩空间为 OKLCH 时的渐变写法 */
}在确保您当前的浏览器支持 OKLCH 色彩空间的情况下可以利用浏览器的开发者工具 DevTools通过禁用或启用第二个 background-image 规则集来查看二者的显著区别。
在指定某个具体色彩空间时必须使用关键字 in然后再跟上所需的色彩空间名称。也可以指定其他 CSS 支持的色彩空间名称如极坐标色彩空间中的 hsl、hwb、lch 与 oklch以及矩形色彩空间下的 srgb、srgb-linear、lab、oklab、xyz、xyz-d50 或者 xzy-d65注意不是每个色彩空间都有对应的 CSS 颜色语法函数。如果不指定色彩空间默认按 sRGB 进行插值运算。
由于每种色彩空间渲染出的渐变效果各不相同因此当需要设置特定的渐变效果时多尝试几种色彩空间不失为寻求最优方案的一个有效途径。通常情况下如果渐变涉及的两种色调存在明显差异此时指定某个极坐标色彩空间如 oklch 或 hsl效果可能会更好一些若要从更鲜艳的色彩过渡到中性色调如灰色、黑色、白色或透明色等则最好选用矩形色彩空间如 srgb。 注意 CSS 渐变中涉及的颜色插值算法与第 11 章中讲过的 color-mix() 函数中的用法相同。例如声明 color-mix(in srgb, white 20% blue) 的渲染效果从数学的角度看与 srgb 色域下由白到蓝渐变、且距白色节点 20% 处的渐变色相比效果是一样的。 另外谷歌的 Chrome 团队还针对当前所有可用的色彩空间在 Code Pen 网站上制作了几个渐变效果的演示案例具体的渲染效果详见https://codepen.io/keithjgrant/full/GRzjGqL。您不妨快速浏览一遍了解各个色彩空间在渐变设置中的差异。值得注意的是在这些演示案例中个别示例还暴露了一些浏览器的 Bug这个问题稍后再做处理。
13.1.2.1 极坐标色彩空间下的高级设置 More options in polar color spaces
在极坐标色彩空间下色调是一个可以循环取值的参数circular value。因此在设置两个不同色调的渐变效果时渐变运算可以分别沿着色轮的两个不同方向进行。例如由红色渐变为黄色通常会出现橙色的渐变色。此时采用的是较短的渐变路径也是 CSS 渐变默认的方向。
然而上述渐变也可以沿色轮中较长的路径进行使其依次经过品红magenta、紫色purple、蓝色blue、蓝绿色teal以及绿色green。若两种颜色在色轮上的距离较近那么沿较长路径定义的渐变效果将渲染出一道绚丽彩虹色。您甚至可以将两个颜色节点指定为同一颜色从而得到长路径下的完整彩虹效果如图 13.7 所示的色轮路径示意图。 【图 13.7 极坐标色彩空间下的渐变设置可以沿着色轮的两条长短不一的路径分别进行】
渐变路径的变更可以通过在渐变函数中添加关键字 long hue 实现。根据代码清单 13.8 同步更新本地样式表并查看最终的渐变效果。
代码清单 13.8 long hue 在渐变函数中的示例应用
.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, yellow, blue);background-image: linear-gradient(90deg in oklch longer hue, /* 令渐变沿较长的色调路径进行 */yellow,blue);
}在渐变函数中第一个参数很可能因为声明了这些配置项而书写得较长例如上述代码。此时应该像示例代码那样将样式声明分为多行进行书写。
CSS 提供了四个不同的关键字来设置渐变的色调方向它们仅在极坐标色彩空间polar color space下有效
shorter hue —— 在两种色调间选择较短路径默认值longer hue —— 在两种色调间选择较长路径increasing hue —— 路径方向与色调角递增即顺时针的方向一致decreasing hue —— 路径方向与色调角递减即逆时针的方向一致。
不妨尝试在渐变设置中使用上述关键词并查看其相应的渲染效果。在本例中increasing hue 等效于 shorter huedecreasing hue 等效于 longer hue。究其原因示例中的黄色和蓝色在色轮上的角度分别为 110 度和 164 度这些数值是通过浏览器的开发者工具、将黄色 yellow 和蓝色 blue 分别转换为对应的 OKLCH 颜色值后得到的。但如果使用了不同的颜色节点color stops情况则可能大不相同。
13.1.2.2 浏览器 Bug 与颜色问题 Browser bugs and color quirks
CSS 许多新推出的颜色特性对于浏览器而言都相对较新并且其中也存在一些错误bugs尤其是在渐变中使用 OKLCH 或 HSL 色彩空间时对于某些色调特别是蓝色如果其中一个颜色节点为白色、黑色、或透明可能会出现意外状况。
例如在 OKLCH 或 HSL 色彩空间下、由蓝色渐变到某种非饱和色如白色或黑色的过程中都会产生绿色或紫色的渐变色具体效果视非饱和色的颜色深度以及被测浏览器而定再比如在从红色渐变到某非饱和色的过程中中间位置会生成橙色orange或酒红色burgundy的渐变色。希望这些问题都能在被波及浏览器的后续版本更新中得以修复。在将白色、黑色、灰色或透明色设为渐变效果的颜色节点时目前避开上述问题的最佳方案是使用 sRGB 或者其他矩形色彩空间。
如果实在要使用 OKLCH 或 HSL 色彩空间上述问题也可以通过这样的方式来解决采用同样的色彩空间来指定渐变需要的颜色然后在保持相同色调的情况下适度微调色度或饱和度参数以此作为渐变中的其他颜色节点color stop。比如说在 OKLCH 色彩空间下定义一个由蓝色 blue 到 oklch(100% 0.001 264deg) 的渐变效果而非直接从蓝色 blue 渐变到白色 white。该方案的更多详细介绍可以参考我写的这篇文章https://mng.bz/2Kp0。 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版$44.99中文版139.00原版$59.99中文版暂无待出版现价原版$36.49中文版52.54 起步原版$52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00
本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
目前已完结的章节可进入本专栏查看详情连载期间完全免费 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局已完结 5.1 构建基础网格5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容5.6 对齐相关的属性5.7 本章小结 第六章 定位与堆叠上下文已完结 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 6.2.1 关闭按钮的绝对定位6.2.2 伪元素的定位问题 6.3 相对定位 6.3.1 创建下拉菜单上6.3.2 创建 CSS 三角形下 6.4 堆叠上下文与 z-index 6.4.1 理解渲染过程与堆叠顺序上6.4.2 用 z-index 控制堆叠顺序上6.4.3 深入理解堆叠上下文下 6.5 粘性定位6.6 本章小结 第七章 响应式设计已完结 7.1 移动端优先设计原则上篇 7.1.1 创建移动端菜单下篇7.1.2 给视口添加 meta 标签下篇 7.2 媒体查询上篇 7.2.1 深入理解媒体查询的类型上篇7.2.2 页面断点的添加中篇7.2.3 响应式列的添加下篇 7.3 流式布局7.4 响应式图片7.5 本章小结 第八章 层叠图层及其嵌套 8.1 用 layer 图层来操控层叠规则上篇 8.1.1 图层的定义上篇8.1.2 图层的顺序与优先级下篇8.1.3 revert-layer 关键字下篇 8.2 层叠图层的推荐组织方案8.3 伪类 :is() 和 :where() 的用法8.4 CSS 嵌套的使用 8.4.1 嵌套选择器的使用8.4.2 深入理解嵌套选择器8.4.3 媒体查询及其他 规则 的嵌套 8.5 本章小结 第九章 CSS 的模块化与作用域 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分9.2.2 模块的命名 9.3 CSS 的作用域 9.3.1 CSS 作用域的就近原则9.3.2 划定作用域的边界9.3.3 CSS 中的隐式作用域9.3.4 关于 CSS 作用域与层叠图层 9.4 CSS 模式库9.5 本章小结 第十章 CSS 容器查询 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 10.2.1 容器的类型10.2.2 容器的名称10.2.3 容器与模块化 CSS 10.3 与容器相关的单位10.4 容器样式查询的用法 10.4.1 将模块与所在容器解耦10.4.2 减少重复代码 10.5 本章小结 第 11 章 颜色与对比 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH 11.3 利用 OKLCH 处理颜色上篇 11.3.4 从页面其他颜色衍生出新颜色下篇 11.4 思考字体颜色的对比效果11.5 本章小结 第 12 章 CSS 排版与间距 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-face 的工作原理 12.4.1 字体格式与回退处理12.4.2 同一字型的多种变体形式 12.5 性能因素考量 12.5.1 font-display 属性解析12.5.2 可变字体的用法 12.6 调整字间距提升可读性 12.6.1 正文的字间距12.6.2 标题、小元素和间距 12.7 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介 译注关于 gray dead zoneCSS-TRICKS 网站也有一篇不错的文章探讨过这个问题感兴趣的朋友不妨了解一下https://css-tricks.com/the-gray-dead-zone-of-gradients/。 ↩︎ color wheel即色轮、色彩轮是一个用于表示颜色关系的圆形图形。它将颜色排列成一个闭合的环形通常包括原色、间色和复合色。色轮是艺术、设计和色彩理论的重要工具。 ↩︎
