建筑设计门户网站,吉林省建设信息网工程招投标,优化大师有必要花钱吗,做营销网站哪家好当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 14.1.1 滤镜的类型14.1.2 背景滤镜 14.2 蒙版 14.2.1 带渐变效果的蒙版特效14.2.2 基于亮度来定义蒙版14.2.3 其他蒙版属… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 14.1.1 滤镜的类型14.1.2 背景滤镜 14.2 蒙版 14.2.1 带渐变效果的蒙版特效14.2.2 基于亮度来定义蒙版14.2.3 其他蒙版属性 14.3 剪切路径 ✔️ 14.3.1 多边形的裁剪路径 ✔️14.3.2 Firefox 内置的剪切路径工具 ✔️14.3.3 其他剪切路径类型 ✔️ 14.4 浮动与形状 文章目录 14.3 剪切路径 Clipping paths14.3.1 多边形的裁剪路径 Polygon clipping paths14.3.2 Firefox 内置的剪切路径工具 Firefox clip-path tools14.3.3 其他剪切路径类型 Other clip-path types 《CSS in Depth》新版封面 译者按 本篇延续了上一节的风格提纲挈领地介绍了 CSS 剪切路径clip-path的操作技巧与相关注意事项。其中最引人注目的莫过于顺带介绍的参考阅读资料和线上小工具了。念书时常听老师讲一千个读者有一千个哈姆雷特。同样的道理在这本硬核资料书中同样适用是草草略过作者给出的延伸材料还是一步一个脚印认真学习这些内容书中无数个这样的细微抉择其实就已经决定了读者未来能够到达的 CSS 乃至前端开发的高度。希望大家都能做一个对技术细节“斤斤计较”的有心人。 14.3 剪切路径 Clipping paths
剪切路径clipping path 是另一种有选择地隐藏元素局部区域的方法。剪切路径在概念上与蒙版类似但它不是用图片来遮挡元素而是通过数学方法来定义形状即通过 clip-path 属性进行设置。
本节先为您演示剪切路径的一个典型案例然后在逐步过渡到更复杂的知识点。本节第一个示例的最终效果如图 14.7 所示。其中剪切形状被定义为一个圆。页面元素所有不在该形状内的部分就会被隐藏。此时圆的尺寸大于图片高度从而令元素可见部分的上下边缘呈直线、左右两边则呈曲线效果。 【图 14.7 矩形示例图片在设置剪切路径为圆形后的最终效果】
要实现上述效果我们先根据代码清单 14.9 给出的 HTML 标记给示例页面添加一个图片元素。操作时既可以替换到前面演示的 HTML 元素也可以将新的图片元素追加到页面末尾。
代码清单 14.9 演示剪切路径特效对应的图片 HTML 标记
imgclassclipped srcimages/eagle.jpgaltGolden Eaglewidth796 height529
/接着利用类名 clipped 选中该元素并通过 clip-path 属性设置一个剪切路径设置该属性最简单的一种方式就是使用 circle() 函数。该函数需要一个表示圆半径的长度值或百分数作参数。请根据代码清单 14.10 同步更新本地样式表。
代码清单 14.10 设置圆形剪切路径的示例样式代码
.clipped {clip-path: circle(398px); /* 剪切出一个半径为 398px 的圆 */
}由于图片宽度设为了 796px上述代码中的半径 398px 刚好是它的一半。此外还可以使用一个特殊的关键字实现相同的效果circle(farthest-side)。同理指定 circle(farthest-side) 将调整圆的大小并覆盖元素的上下边缘只因它们是距离圆心最近的两条边。 注意 将属性 clip-path 的值设为除了初始值 none 以外的任意合法值后页面会同步创建一个新的堆叠上下文详见第 6 章相关内容。 在本例中剪切出的圆位于元素正中但您也可以使用 at 关键字以及 x、y 坐标对剪切出的形状重新定位。这样圆心就会移动到新的坐标位置。请根据下列示例代码更新样式表并查看页面效果
.clipped {clip-path: circle(229px at 337px 293px);
}样式更新后剪切出的圆就跑到了鹰头的正中位置同时圆的大小也进行了调整使得图片大部分区域都不可见仅渲染出了鹰的面部与喙。这些 x 和 y 坐标的值都是从元素边框盒border box的左上角开始测量的。圆的尺寸和方位可以设置为百分数。 【译注】 指定圆心即半径后的页面效果如下图所示 【补图手动调整剪切圆大小与方位后的页面效果及其在原始尺寸中的位置】 此外还可以使用 ellipse() 函数来定义一个椭圆形的剪切路径。使用方法与 circle() 函数类似区别在与椭圆函数需要两个尺寸参数即垂直方向与水平方向上的半径。根据椭圆剪切出的图片效果如图 14.8 所示。 【图 14.8 剪切路径为椭圆时的图片最终效果】
上述效果对应的 CSS 样式如代码清单 14.11 所示。请将其同步更新到本地样式表。
代码清单 14.11剪切路径为椭圆时的示例样式代码
.clipped {clip-path: ellipse(300px 170px at 360px 290px); /* 定义一个水平半径 300px、垂直半径 170px 的椭圆 */
}值得注意的是与蒙版特效一样剪切路径的设置并不会改变目标元素的实际大小特效只是隐藏了元素的某些区域。此时元素仍然占据着页面原始大小浏览器只是将裁剪遮挡的部分变为了空白。
在绝大多数实际项目开发中往往需要让剪切图形的尺寸大小贴近目标元素的完整宽高。因此在定义剪辑形状时通常建议先在图片编辑工具中将图片裁剪到合适的尺寸然后再设置剪切路径以便按人们期望的方式来调整形状。
14.3.1 多边形的裁剪路径 Polygon clipping paths
利用多边形函数 polygon() 还可以定义出更复杂的剪切形状。该函数的参数为任意数量的 x、y 坐标组各组之间用逗号分隔每一组坐标都对应一个多边形的顶点位置。例如polygon(50% 0%, 100% 100%, 0% 100%) 就定义了一个三角形对应的三个顶点坐标分别为顶部正中的50% 0%、右下角的100% 100%以及左下角的0% 100%。
有了这个函数我们就能根据想要的效果定义出具有任意顶点的多边形。代码清单 14.12 给出了剪切多边形的另一个示例。试根据以下样式代表同步更新本地样式表。
代码清单 14.12 剪切图形为多边形的示例样式代码
.clipped {clip-path: polygon(380px 50px, 650px 210px, 520px 500px, 20px 360px); /* 定义包含四个顶点的多边形 */
}上述代码的页面效果如图 14.9 所示。该裁剪路径形似一个风筝并且是横着放置的风筝 【图 14.9 多边形的图片剪切效果】
如本例所示利用多边形剪切我们既可以围绕图片的关键部分重塑图片的可见区域也可以在指定部位附近雕刻出有趣的边框效果。为此知名前端大牛 Temani Afif 还专门写了一篇文章演示了不少生动案例深度探讨了渐变蒙版和剪切路径在构建趣味边框特效中的应用详见https://mng.bz/7d0v。 提示 推荐一个非常实用剪切路径在线制作工具CSS clip-path maker。该工具预设了大量美观实用的剪切图形效果供人们选用。 译注 试了一下这款小工具确实不错觉得有必要补个截图 【补图线上剪切路径特效生成工具 CSS clip-path maker 主页面截图】 14.3.2 Firefox 内置的剪切路径工具 Firefox clip-path tools
编写剪切路径的代码尤其是多边形的剪切路径往往会十分繁琐需要不断调整坐标值才能达到预期效果。为此Firefox 浏览器的开发者工具 DevTools 提供了一个我认为对与构建或微调剪切路径特效非常有价值的可视化编辑工具。略为遗憾的是目前其他主流浏览器暂未内置该工具。
在 Firefox 中右键单击页面上设有剪切路径的图片元素并选择 “检查Inspect” 即可打开 DevTools 工具。找到目标元素的 clip-path 属性会发现其函数旁边有一个多边形图标如图 14.10 所示。只要是通过内置函数 circle()、ellipse()、polygon() 以及 inset()具体用法稍后介绍定义的任意剪切路径都会出现该图标。 【图 14.10 点击多边形图标来编辑剪切路径】
点击该多边形图标将启用主浏览器窗口中的 clip-path 交互式编辑模式。剪切路径的轮廓用蓝色细线勾勒每一个可以编辑的顶点都会出现一个小圆圈如图 14.11 所示。点击并拖动其中某个圆圈就能实时编辑图形并在 DevTools 的 “规则” 面板Rules pane中看到当前的变更情况。 【图 14.11 Firefox 浏览器提供的 clip-path 交互式编辑模式效果】
编辑多边形时每个顶点处都设计了一个控制手柄control handle双击多边形的某条边可以新增一个控制点。编辑圆形时我们会看到两个控制手柄一个用于移动圆心位置另一个则在圆的右侧用于调整半径大小。椭圆的操作与圆类似只是在底部会多出一个控制点用于控制椭圆垂直方向上的半径大小。
14.3.3 其他剪切路径类型 Other clip-path types
CSS 还提供了几种其他类型的剪切路径。这些特效的试验工作就交给各位了
inset() —— 根据指定的大小从元素边缘向内剪切将元素剪切为一个矩形。给定某个参数值例如 inset(15px)会从元素的每一条边向内裁剪指定大小。若提供两个、三个或四个参数值则可以独立控制各边剪切量用法类似 padding 属性。path() —— 根据指定的 SVG 路径命令字符串进行剪切。例如path(M68,312C17,239 117,63 223,62C328,61 409,276 370,319C330,365 118,384 68,312Z)。SVG 路径语法过于晦涩难懂难以实现手动编辑人们往往需要借助矢量编辑软件进行处理然后将其导出。margin-box —— 根据元素的外边距盒进行剪辑。border-box —— 根据元素的边框盒进行剪辑。padding-box —— 根据元素的内边距盒进行剪辑。content-box —— 根据元素的内容盒进行剪辑。
以上剪切路径设置中最为通用的反倒是 path() 函数因为该函数在定义复杂图形与曲线方面具备了极为强大的灵活性远超 polygon() 函数的能力范围。然而path() 函数的灵活应用离不开矢量编辑软件的相关操作经验。关于 SVG 路径语法的快速入门介绍可以参考 Chris Coyier 发表的这篇文章The SVG path Syntax: An Illustrated Guide详见https://mng.bz/ma0a。 译注 本以为作者完全放弃了 CSS 浮动样式的介绍没想到会在下一节中再次邂逅 float 属性。不过这才是 float 属性的正确打开方式。等消化完本节内容后让我们稍事休整一起来看看新版本会怎么定位 float 这一古老的 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 与 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 本章小结 第 13 章 渐变、阴影与混合模式 13.1 渐变 13.1.1 使用多个颜色节点上13.1.2 颜色插值方法中13.1.3 径向渐变下13.1.4 锥形渐变下 13.2 阴影 13.2.1 利用渐变和阴影打造立体感13.2.2 使用扁平化设计创建元素13.2.3 创建混合风格的按钮外观 13.3 混合模式 13.3.1 为图片上色13.3.2 混合模式的类型13.3.3 图片纹理的添加13.3.4 融合混合模式的用法 13.4 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
