邹平做网站的联系方式,新乡市做网站,网站的倒计时怎么做的,寺庙网站模板当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一章 层叠、优先级与继承#xff08;已完结#xff09;第二章 相对单位#xff08;已完结#xff09;第三章 文档流与盒模型#xff08;已完结#xff09;第四章 Flexbox 布局#xff08;已… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一章 层叠、优先级与继承已完结第二章 相对单位已完结第三章 文档流与盒模型已完结第四章 Flexbox 布局已完结第五章 网格布局已完结【第六章 定位与堆叠上下文】 ✔️ 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.3.2 创建 CSS 三角形 Creating a CSS triangle 《CSS in Depth》新版封面 译者按 上一小节介绍了 CSS 的相对定位在下拉菜单效果中的具体实现最后还根据作者的描述补全了相关 JavaScript 逻辑实现了用 Tab 键循环选中弹出的下拉菜单项。值得一提的是这部分源代码在第 1 版其实是一个类名为 dropdown-label 的 div 元素div classdropdown-labelMain Menu/div并在鼠标悬停时出现下拉菜单。考虑到鼠标 :hover 效果在触屏设备上兼容性较差且有违最佳实践通过 JS 切换样式类的方案更稳健新版才统一换成了一个 button 按钮并通过点击来实现下拉切换。这种严谨复盘的思考方式值得借鉴。顺着作者的思路我们再来看看他是怎么实现纯 CSS 的三角形效果的其间对于页面可访问性又有哪些细节问题需要考虑一起来看看吧。 6.3.2 创建 CSS 三角形 Creating a CSS triangle
下拉菜单距离完美还差最后一步。虽然已经实现了基本功能但用户可能没法一眼看出主菜单按钮即“Main Menu”字样的切换按钮下方还有隐藏内容。这时就需要给按钮加上一个向下的小箭头告诉用户在它下方还有更多内容可以浏览。
我们可以通过元素边框的一个小技巧来绘制一个三角形并以此充当一个向下指的箭头。具体来说就是利用切换按钮的伪元素 ::after 来绘制三角形然后设置绝对定位将它放到按钮的右侧。
大多数情况下我们给一个元素设置的边框都比较细通常给个 1px 或 2px 就差不多了但如果把边框设置为如图 6.6 所示的粗细会怎么样呢图中对每一侧的边框都设置了具有强烈反差感的颜色以便区分每条边的边界和起始位置 图 6.6 带粗边框样式的示例元素
注意观察四个角上两条边的边缘相接的地方这里形成了一个对角边diagonal edge。此时再观察一下将元素的宽高缩减到 0 会是什么效果。如图 6.7 所示所有的边框都汇聚到了一起并最终在元素正中位置相遇了 图 6.7 元素宽高为零时每条边都变成了一个三角形
此时元素边框的每一侧都呈三角形上边框朝下指右边框向左指以此类推。基于这样的观察我们就可以利用其中一条边框作为三角形然后将其余各边设置为透明来绘制需要的箭头符号。一个元素如果左右边框都透明只留一个可见的上边框最终效果则会如图 6.8 所示形成一个简单的三角形。 图 6.8 利用元素上边框实现的 CSS 三角形效果
按照上述思路给伪元素 .dropdown-toggle::after 设置样式形成一个 CSS 三角形。然后使用绝对定位将它放置到合适的位置。根据如下样式代码更新页面
代码清单 6.10 对下拉按钮上的三角形设置绝对定位的样式代码
.dropdown-toggle {padding: 0.5em 2em 0.5em 1.5em; /* 增加按钮元素的右内边距为箭头标记预留足够空间 */border: 1px solid #ccc;background-color: #eee;border-radius: 0;
}.dropdown-toggle::after {content: ;/* 将元素放置在切换按钮的右边 */position: absolute;right: 1em; top: 0.9em; /* 将上边框做成一个向下指的箭头 */border: 0.3em solid; border-color: black transparent transparent;
}.dropdown.is-open .dropdown-toggle::after {top: 0.6em;border-color: transparent transparent black; /* 下拉菜单打开时箭头向上指 */
}上述样式中伪元素由于没有内容译注content: 所以也不会渲染宽高利用 border-color 属性的简写形式将上边框的颜色设置为黑色左右两边及下边框的均设为透明从而构建出一个向下的箭头元素 .dropdown-toggle 的右边用内边距预留出足够空间以便放置三角形。最终效果如图 6.9 所示 图 6.9 带箭头标记的下拉菜单按钮效果
打开菜单箭头方向应该反转朝上表示菜单可以收拢关闭。对 top 属性值做微调范围约在 0.9em 到 0.6em 左右让朝上指时的箭头看起来跟向下指时处于同一位置即可。
此外箭头效果的实现也可以考虑使用图片image或背景图background image但是短短几行 CSS 代码就能免去不必要的网络请求何乐而不为呢当然也可以在 HTML 中嵌入一个轻量的 SVG但项目中要是没有引入过什么图标集的话本例介绍的这种只用 CSS 的实现方案会更省心。别看它只是个小小的箭头像这样轻量小巧又美观的点缀效果也能实实在在为您的应用与网站增色不少。
这项技术还可以用来构建其他复杂的形状比如梯形、六边形以及星型。想要查看用 CSS 构建的各种形状请参阅 CSS-Tricks 网站的专题文章The Shapes of CSS。请注意这些形状通常也不是必须要掌握的知识点尤其是在 SVG 图标盛行的当下。它们只是为了给大家展示 CSS 具备的各种能力。 译注 本节原文最后给出的文章链接在 CSS-Tricks 网站已失效即 https://css-tricks.com/examples/ShapesOfCSS/为此官网上很早就有读者反馈该问题但一直没有公布新的 URL。我学到这里时碰巧搜到了这篇文章发现是今年 4 月才更新的有机会给各位转发一下免得今后又过期了。此外更新文章链接时还有个意外彩蛋也一并分享给各位。更新这篇文章的正是 CSS-Tricks 网站的创始人 Chris Coyier。 此人来头可不小不仅一手创办并成功运营 CSS-Tricks 长达 15 年之久2007 年创办2022 年被知名 IDC 服务商 DigitalOcean 收购同时也是 CodePen 网站的联合创始人之一。感兴趣的朋友可以去他的 个人网站 凑凑热闹学习学习这位仍活跃在 CSS 一线的知名大咖是怎么做自我营销的。里面有很多漂亮的设计可供参考也是个不错的学习园地。Chris Coyier 有句话给我印象很深 I’m big on the power of writing as a way to think better and improve yourself. 我极为看重写作的力量那是一种能帮我更好地思考并提升自我的有效途径。深以为然 气氛都烘托到这儿了怎么也得来张大头贴吧 Chris Coyier 大头贴 关于《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 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
