【CSS in Depth 2 精译_079】第 13 章:渐变、阴影与混合模式概述 + 13.1:CSS 渐变效果(一)——使用多个颜色节点

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第四部分 视觉增强技术 ✔️
  • 【第 13 章 渐变、阴影与混合模式】 ✔️
    • 13.1 渐变 ✔️
      • 13.1.1 使用多个颜色节点(一) ✔️
      • 13.1.2 颜色插值
      • 13.1.3 径向渐变
      • 13.1.4 锥形渐变

文章目录

  • [第 13 章 渐变、阴影与混合模式 Gradients, shadows, and blend modes](#第 13 章 渐变、阴影与混合模式 Gradients, shadows, and blend modes)
    • [13.1 渐变 Gradients](#13.1 渐变 Gradients)
      • [13.1.1 使用多个颜色节点 Multiple color stops](#13.1.1 使用多个颜色节点 Multiple color stops)
        • [13.1.1.1 条纹 Stripes](#13.1.1.1 条纹 Stripes)
        • [13.1.1.2 重复渐变 Repeating gradients](#13.1.1.2 重复渐变 Repeating gradients)

《CSS in Depth》新版封面

第 13 章 渐变、阴影与混合模式 Gradients, shadows, and blend modes


本章概要

  • 线性渐变、径向渐变及锥形渐变
  • 不同色彩空间下的颜色插值方法
  • 盒阴影与文字阴影
  • 背景图片的尺寸调整与定位
  • 通过混合模式实现背景与内容的组合

至此,我们已经介绍了很多 CSS 知识,想必您已经对 CSS 的基本工作原理有了更深入的理解。我们不仅介绍了多种布局方法,也花了不少精力去考察如何让样式代码组织高效且易于维护,甚至还从头开始探讨了创建一个网站必备的核心要素。最后还教会您如何关注间距、排版及其他页面设计相关的细节。

接下来的两章内容将重点介绍特定页面效果的实现技巧,以及增强页面视觉趣味性的相关方法。其中一些效果您今后可能会经常用到,特别是渐变与阴影方面的内容;而其他效果可能只是偶尔会考虑。但可以肯定的是,您绝不会将所有特效都堆到一处。因此后续内容也不会创建面面俱到的综合示例页,而是聚焦单独的示例来进行讲解。

以图 13.1 所示的按钮为例,这里用到了渐变背景和投影两种特效,使页面具有了立体感。背景色从顶部的中度蓝(颜色值 #57b)过渡到了底部的深蓝(#148)。您可能甚至都没留意到这层渐变,但是再配上底部和右侧边缘的阴影效果,就让按钮整体呈现出了立体感。

【图 13.1 设置了渐变背景和阴影效果的示例按钮】

本章将重点介绍渐变与阴影的工作原理,并探讨几个实际应用。然后再介绍一种非常有意思的页面特效,称为 混合模式(blend modes。它可以把多个背景图片和背景色按照不同的方式混合在一起使用。

13.1 渐变 Gradients

前面的章节已经介绍了纯色背景和一些背景图片的使用方法,但是 background 属性还有很多功能有待探索。其实,background 是以下八个样式属性的简写:

  • background-image ------ 从某个文件或者生成的某个渐变色来设置一张图片。
  • background-position ------ 指定背景图片的初始位置。
  • background-size ------ 指定元素内背景图片的渲染尺寸。
  • background-repeat ------ 决定在需要填充整个元素时,是否平铺图片。
  • background-origin ------ 指定定位背景的参考系是相对于元素的边框盒 border-box 而言的、还是其内边距盒 padding-box(初始值)、抑或是其内容盒 content-box
  • background-clip ------ 指定背景是否应该填充元素的边框盒 border-box(初始值)、内边距盒 padding-box 或者内容盒 content-box
  • background-attachment ------ 指定背景图片是随着元素上下滚动(初始值),还是固定在视口区域。注意,值为 fixed 时可能会对页面性能带来消极影响。
  • background-color ------ 指定纯色背景,并渲染到背景图片的下方。

本章将介绍上述属性。此刻您需要了解的是,使用简写属性(background)虽然可以设置指定的样式,但同时也会把其他属性值重置为初始值。因此,在需要对多个背景属性进行操作时,我往往会单独设置想要的属性。

background-image 属性非常有意思。除了之前介绍的通过 URL 来引用某个图片的用法外(第 7 章中的 background-image: url(coffee-beans.jpg)),该属性还可以接受一个渐变函数。例如,定义一个从白色过渡到蓝色的渐变色,如图 13.2 所示。

【图 13.2 由一种颜色线性渐变到另一种颜色的效果示意图】

渐变是一个非常有用的特效。我们先来看看渐变的工作原理,然后在列举几个实际案例。要尝试渐变设置,需要创建一个新页面和样式表。添加代码清单 13.1 中的 CSS 样式,其中用到了 linear-gradient() 函数来定义渐变效果。

代码清单 13.1 基础线性渐变示例

css 复制代码
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(to right, white, blue); /* 从左至右、从白色渐变为蓝色 */
}

渐变效果其实就是背景图片,渐变本身不会影响元素的尺寸大小。为了方便演示,我给该元素明确设置了宽高。该元素是没有内容的,因此必须手动给定一个高度才能看到渐变效果。

linear-gradient 函数通过三个参数来定义渐变效果:角度(angle)、起始颜色(starting color)与终止颜色(ending color)。本例中的角度值即 to right,表示渐变效果将从元素左侧开始(即白色),平滑过渡到右侧(即蓝色)。此外,也可以采用其他颜色表示方法,例如十六进制法(#0000ff)或者 OKLCH 值(oklch(45% 0.31 264deg))或者关键字 transparent。试根据代码清单 13.2 同步更新页面元素,查看本地渐变效果。

代码清单 13.2 带渐变背景效果的示例元素 HTML 代码

html 复制代码
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="fade"></div><!-- 带渐变背景效果的示例元素 -->
</body>
</html>

CSS 提供了多种方式来指定渐变的角度值。在本例中,我们使用了 to right,当然也可以使用 to top 或者 to bottom,甚至可以指定某个对角(corner),例如 to bottom right,表示渐变效果将从元素的左上角开始,逐渐过渡到元素右下角。

为了更精确地控制角度,也可以使用更具体的单位,例如"度"。角度值 0deg 表示垂直向上(相当于 to top);比它更大的角度值会沿着顺时针方向变动,因此 90deg 表示向右渐变,180deg 表示向下渐变,360deg 又回到了向上渐变。因此,代码清单 13.3 中的声明与前面的示例等价。

代码清单 13.3 使用度(deg)为单位的渐变示例代码

css 复制代码
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, white, blue); /* 这里的 90deg 相当于前面的 to right */
}

度是最常用的单位,此外还有一些其他单位可以用来表示角度值,如下所示:

  • rad ------ 以弧度(radians)为单位,对于一个完整的圆,其弧度制为 ,约合 6.2832 弧度。
  • turn ------ 表示环绕圆周的圈数(full turns)。一圈相当于 360 度(即 360deg)。角度不足一圈可以用小数表示,例如 0.25turn 相当于 90deg
  • grad ------ 以梯度(gradians)为单位,一个完整的圆是 400 梯度(即 400grad),因此 100grad 即对应 90deg

可以尝试一下在渐变中设置不同的角度值,看看效果如何。

注意

以上介绍的角度单位适用于任意需要设置 CSS 角度值的地方,包括各种颜色表示法中的色调的角度值,例如 oklch(45% 0.31 0.75turn) 就是一个合法的 OKLCH 颜色值。

13.1.1 使用多个颜色节点 Multiple color stops

大部分渐变只涉及两种颜色,从一种颜色过渡到另一个即可。也可以定义包含多个颜色的渐变效果,其中每个颜色都可以成为一个 颜色节点(color stop。图 13.3 为包含了三种颜色节点(蓝绿色、白色、蓝色)的渐变样式示例。

【图 13.3 包含三个颜色节点的渐变色效果】

通过向 linear-gradient() 函数添加更多颜色,就可以插入多个颜色节点。试根据代码清单 13.4 所示代码同步更新样式表,然后在页面上查看渐变效果。

代码清单 13.4 包含多个颜色节点的线性渐变样式声明

css 复制代码
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(90deg, turquoise, white, blue); /* 指定多个颜色节点 */
}

一个渐变样式可以接受任意数量的颜色节点,各节点间通过逗号分隔。渐变函数会自动均匀平铺这些颜色节点。在本例中,最左侧(即 0% 位置)从蓝绿色开始,然后过渡到中间位置(即 50%)的白色,再到最右侧(即 100%)的蓝色。我们也可以在渐变函数中为每个颜色节点手动指定位置。例如代码清单 13.4 中的渐变样式等效于以下代码:

css 复制代码
linear-gradient(90deg, turquoise 0%, white 50%, blue 100%)

上述代码不难看出,颜色节点的位置是可以按需调节的,不必非得均匀分布。指定具体位置时也不必非得使用百分数,换成像素单位制、相对单位 em 以及其他长度单位也是完全有效的写法。

13.1.1.1 条纹 Stripes

如果在同一个位置设置了两个颜色节点,那么渐变会直接从一种颜色变为另一种颜色,而不是平滑过渡。如图 13.4 所示的渐变色效果,从蓝绿色开始,直接变为白色,随后又变为蓝色。整体呈现条纹状。

【图 13.4 通过在同一位置放置两种颜色节点的渐变声明实现的条纹效果】

实现该渐变效果的样式代码如代码清单 13.5 所示。注意渐变中有四个颜色节点,其中两个为白色。

代码清单 13.5 同一个位置放置两个颜色节点,从而实现条纹效果

css 复制代码
.fade {
  height: 200px;
  width: 400px;
  background-image: linear-gradient(
    90deg,
    /* 相同位置上的各颜色节点: */
    turquoise 40%, 
    white 40% 60%, 
    blue 60%
  );
}

第一个颜色节点是位于 40% 处的蓝绿色(turquoise),所以纯色效果从左侧边缘一直延伸到 40% 处;又因为第二个颜色节点为白色,且同样位于 40% 位置,因此渐变从这里开始变为白色;随后另一个白色节点位于 60% 处,从而令 40% 到 60% 之间的渐变效果均为白色。最后一个颜色节点也位于 60% 处,颜色为蓝色,因此从这里开始突变为蓝色,并一直延伸到元素右边缘。

这些颜色节点的位置同样可以换成任何有效的长度值,因此除了使用 40%,还可以换成 160px 或者 10em 等。

13.1.1.2 重复渐变 Repeating gradients

尽管前面的例子只是为了演示,但也可以用来实现一些有趣的效果,特别是搭配另一个略有不同的渐变函数 repeating-linear-gradient() 时。该函数与 linear-gradient() 函数的用法基本相同,唯一的区别在于该函数能够重复渲染。利用这一特性可以实现类似理发店门外的旋转招牌效果,非常适合作为进度条的样式(如图 13.5)。

【图 13.5 使用重复线性渐变的条纹状进度条】

对于重复渐变,最好使用特定的长度而不是百分比值,因为设置的值决定了要重复渲染的图片尺寸。相应的条纹效果样式代码详见代码清单 13.6。试根据以下代码同步更新本地样式表。

代码清单 13.6 创建沿对角线倾斜的条纹进度条

css 复制代码
.fade {
  height: 1em;
  width: 400px;
  /* 浅蓝与深蓝色交替生成条纹效果 */
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(60% 0.1 257deg) 0px 10px,
    oklch(40% 0.1 257deg) 10px 20px
  );
  border-radius: 0.3em;
}

有时,将一个半成品的代码片段改造成自己需要的效果,比从零开始实现要容易一些。您可以在 CSS-TRICKS 网站的这篇 Stripes in CSS 文章中找到更多灵感。



关于《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 与 rem
    • 2.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 还是 px
      • 12.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 本章小结
  • 附录
    • 附录A:CSS 选择器参考
    • 附录B:CSS 预处理器简介
相关推荐
布兰妮甜5 分钟前
使用Svelte构建轻量级应用详解
前端·javascript·框架·svelte
快乐点吧41 分钟前
【前端面试】前端工程化
前端·面试·职场和发展
街尾杂货店&44 分钟前
webpack说明
前端·webpack·node.js
知忆_IS1 小时前
【GIS教程】使用GDAL-Python将tif转为COG并在ArcGIS Js前端加载-附完整代码
前端·javascript·arcgis
Domain-zhuo1 小时前
如何理解React State不可变性的原则
前端·javascript·react native·react.js·前端框架·ecmascript
开心工作室_kaic1 小时前
springboot422甘肃旅游服务平台代码-(论文+源码)_kaic
前端·spring boot·旅游
Summer_Uncle1 小时前
【TS语法学习】ts中的断言运算符
开发语言·前端·typescript
键盘不能没有CV键1 小时前
【AI】⭐️搭建一个简单的个人问答网页
前端·spring boot
OpenTiny社区1 小时前
优化永不止步:TinyVue v3.20.0 正式发布,更美观的官网UI,更友好的文档搜索,更强大的主题配置能力~
前端·vue.js·github