- 原文地址：Smart CSS Solutions For Common UI Challenges
- 原文作者：Cosima Mielke
- 译文出自：掘金翻译计划
原文链接：www.smashingmagazine.com/2021/10/mod…
摘要 ↬ 编写 CSS 从未像今天这样有趣和令人兴奋。在这边文章里我们会讨论我们在工作中都需要面对的常见问题和用例以及如何用现代 CSS 解决它们。如果你有兴趣，我们最近也介绍了 CSS 检查工具, CSS 生成器, 前端模板 和 VS code 扩展 等内容 — 也许会对你有帮助。
看到我们今天能用 CSS 做到的事情真的令人难以置信。不知你是否还记得，曾经想要搞清楚层叠上下文、为什么外边距会折叠以及为什么 top:float 没有效果是多么困难。在这篇文章里我们将只讨论能用 CSS 实现的令人激动和有趣的事，探索我们在工作中必须面对的常见问题和用例。
使用 CSS 生成更丰富逼真的阴影
阴影有助于传达意义并为 UI 增加额外的价值。然而，如今我们在网络上看到的很多阴影并没有充分发挥其潜力。让我们来改变它吧！
Rob O’Leary 对阴影的方方面面进行了全面深入的探讨。他 关于 CSS 技巧的文章 探讨了光线如何影响阴影以及如何定义一个光源 — 这是创建真实阴影效果的基础。一旦打好基础， 你将学到如何使用阴影来营造层次感，如何提升或降低元素以及如何对阴影进行分层。当然，还有在什么场景下使用哪个 CSS 属性。Rob 还研究了阴影对可访问性和性能影响，以及如何设置动画的问题。
规则与不规则阴影。 一个微妙的变化创造了更多的深度.
关于这个主题的另一篇 精彩文章 来自 Josh W Comeau。当前网络上大多数阴影的状态，Josh 将其描述为“看起来不太像阴影的模糊灰色框”，为了终结这个现象，他展示了如何将典型的方框阴影转换为漂亮的、更具真实感的阴影。这个小细节使 UI 界面更具触感。
CSS 剪纸效果
如果你想为标题增加剪纸效果， 你可能会遇到很多困难。或许你需要设置两个单独的 div 标签，然后让它们重叠在一起。间距需要使用相对单位来定义。当然，想要在不同屏幕上显示正常可能有点困难。
使用伪元素和 data 属性实现的CSS 剪纸效果
Stephanie Eckles 的 CSS 剪纸效果 使用 自定义 CSS 属性、CSS Grid 和 CSS transforms 以及一个古老的 CSS 函数 attr() 完美的解决了这个问题。Stephanie 在 h1 标签上设置了一个 data-* 属性，这个标签里还有一个 span 元素。 attr() 会选取 data-*属性的值，这个值用在 :after 伪元素的 content 属性上。然后使用 CSS 自定义属性调整高光、阴影和颜色。可重用且易于维护！
如果你对 Stephanie 和其他热爱 CSS 的优秀人士的更多魔法感兴趣，可以看看 StyleStage, 在这里，现代 CSS 能获得应有的关注。
我们什么时候使用 CSS，什么时候使用 SVG？Ahmad 实现裁剪效果的策略.
此外，请阅读 Ahmad Shadeed’s 的文章 Thinking About The Cut Out Effect, 里面详细何时使用 SVG 会更合理，以及如何在真实场景应用。这篇文章同样提供了大量的代码示例供你上手！
网页中的迷你地图
我们以前见过它：通常位于页面顶部的微小水平条条。随着用户向下滚动，水平条被填满，因此用户知道还剩多少内容可以滚动。
如果我们让它更符合上下文呢？也许页面里包含一些图像、视频、引用或者不同的部分 —— 以不同的方式突出它们，同时还允许读者在页面上固定一个位置并在需要时跳回来会不会更有趣？好吧，Rauno Freiberg 也是这么觉得的。
更具上下文的网页迷你地图怎么样？Rauno Freiberg 有一个建议。
Rauno 的网页迷你地图（目前仅适用于 Firefox）让创建整个页面的小地图表示变得非常简单，同时还允许读者固定页面部分并在它们之间导航。为了实现它，Rauno 使用了一个实验性的 CSS 属性element() 来显示来自任意 HTML 元素的实时图像（目前仅在 Firefox 中可用）。
CSS 中的条件 border-radius
在设计卡片时，当有足够的空间与其他卡片一起显示时，你可能希望 border-radius具有相当大的值。然而，当卡上没有空间并且可能也没有边距时（在较小的屏幕上可能是这种情况），您可能希望减小border-radius到0. 你会如何做到这一点？
如果您需要在较小的屏幕上减小border-radius，同时在较大的屏幕上使其变大该怎么办？嗯，艾哈迈德有一个解决方案。
Ahmad Shadeed 在他关于 CSS 中的条件border-radius 的文章中非常详细地研究了这个问题。这个想法最初由 Heydon Pickering 和 Naman Goel 提出，是使用足够大的数字来触发一种状态或另一种状态。在较小的屏幕，如果 100vw 和 100% 之间的差值等于0，那么border-radius 为0，但如果差值较大，则将使用较大的值。你可以看一下 CodePen。
CSS 颗粒渐变
如果你想添加一些噪点来为图像带来一些纹理该怎么做？当然，你可以将图像导出为 PNG、WebP 或 AVIF 格式，但理想情况下，我们希望在 SVG 之上添加“噪点”，这样我们就可以随时添加和关闭。
为渐变添加一点颗粒感。Jimmy Chion展示了实现原理。
在他关于粒状渐变的 CSS-Tricks 文章中，Jimmy Chion 解释了我们如何以仅使用 CSS 和 SVG 生成彩色噪点来为渐变添加纹理。正如 Jimmy 解释的那样，这个想法是使用 SVG 过滤器来创建噪点，然后将该噪点应用为背景。然后我们将它放在渐变下面，微调亮度和对比度，然后——瞧——你的渐变会渐渐发生变化。
问题解决了！你还可以探索 Jimmy 设置的颗粒渐变 playground。
多行背景渐变
有些事情用 CSS 似乎是不可能的——好吧，直到有人找到了实现它的黑客。如同这个例子：你能实现一个渐变不会为每一行重置的多行文本吗？
是的，正如 Matthias Ott 所展示的那样。Matthias 的解决方案有点笨拙，但由于在文本顶部添加了一个伪元素，他实现了预期的效果。一个有趣的想法。
没有轮廓的表单域焦点
谁说表格一定很无聊？Hakim El Hattab 创建了一个demo，证明即使是像填写姓名、电子邮件和密码这样简单的表单，也是一个跳出框架思考和激发灵感的机会。
为了实现效果，Hakim 在一个不起眼但令人惊讶的动画中结合了表单聚焦和验证，该动画在没有任何字段本身的焦点轮廓的情况下完成。相反，一个点标记了聚焦的字段。当焦点切换到另一个字段时，会触发动画，点跳转到新的聚焦字段，在两者之间绘制连接。同时也无缝集成了表单字段验证，点扩展并显示复选标记。如果想深入了解代码，Hakim 还在Codepen上发布了一个demo。鼓舞人心！
过渡 CSS 渐变
如果你之前试过在 CSS 中应用渐变过渡，你可能已经发现它实际上不起作用。变化不是从一个渐变逐渐消失到另一个渐变显示，而是立即发生的，两者之间没有平滑地过渡。
在 CSS 中过渡渐变？Keith J. Grant 分享了一个聪明的解决方法来实现效果。（大图预览）
正如 Keith J. Grant所发现的，我们可以通过巧妙的变通方法实现过渡。我们为此使用了伪元素和不透明度变换。首先，我们对元素应用一个渐变，然后定位其伪元素以填充元素，然后对其应用第二个渐变。我们通过转换伪元素的不透明度在两个渐变之间“过渡”。你可以在 CodePen 上查看完整的示例。
使用 image-set() 提高图像性能
你听说过image-set()吗？可以将其视为等效srcset HTML 属性之于img 标签的 CSS 背景。基于 Chromium 的浏览器和 Safari 已经支持它好几年了，Firefox 紧随其后。奥利威廉姆斯探讨了我们今天用它能做什么，不能做什么。
image-set()可用于为不同的用户提供不同的背景图像。（大图预览）
正如 Ollie 所描述的，image-set()的一个应用场景是为背景图像提供多种分辨率，并由浏览器来决定向用户提供哪个图像——高分辨率版本适用于高端设备上的用户，而低分辨率图像则用于那些连接速度较慢或像素密度较低的屏幕。
不幸的是，另一个非常有前景的用例仍然缺乏浏览器支持：使用新图像格式（如 AVIF、WebP 或 HEIF）同时为旧浏览器添加后备的想法。如果你今天已经想要实现类似的东西并且不需要background-image，那么<picture>元素可能是一个值得考虑的替代方案，正如 Ollie 所建议的那样。可帮助您提高图像性能。
路径裁剪弹出效果
在clip-path: path()主流浏览器的支持下，是时候发挥创意了。Mikael Ainalem 展示了这个新功能的用例：奶油般光滑的弹出效果。
使用 clip-path: path() 创建的 弹出效果。（大图预览）
Mikael 用clip-path: path()将人的照片与圆形背景区分开来。当您将鼠标悬停在它上面时，此人似乎从圆圈内部升起，营造出酷炫的 3D 印象。非常适合“关于我们”页面。
天马行空的 3D 按钮
细节很重要。设计一个可爱的按钮似乎并不是一件复杂的事情：这里和那里的一些填充、时髦的颜色、可访问的文本和一些按钮状态。好吧，Josh Comeau 一直想设计一个真正天马行空的 3D 按钮，你可能想多点击它几次。
Josh Comeau 提供了一种让你想一遍又一遍地按下的3D 按钮技术。（大图预览）
这个想法很简单：我们首先创建两个图层并稍微偏移前景图层。在悬停时，我们将前层向下移动。然后，当按钮获得焦点且用户使用指针设备时，我们使用 outline-offset 调整焦点轮廓，或使用:focus:not(:focus-visible)隐藏轮廓。
然后，当按钮悬停时，我们将按钮向上移动几个像素，为变换设置一点动画，调整动画的贝塞尔曲线并添加一点模糊，来获得更柔和、更自然的阴影。瞧——我们有一个天马行空的 3D 按钮，它可以在移动设备和桌面上使用，一只点击会让人很愉快。当然，你可以在 Josh 的博客上找到完整的代码片段。
CSS 图表
也许你需要设计柱状图，或者条形图，甚至是多数据集柱状图或堆叠柱状图。你该从哪开始呢？也许可以使用Charts.css，这是一个CSS 数据可视化框架，它使用 CSS 工具类将 HTML 元素样式化为图表。
Perhaps you need to design a column chart, or a bar chart, or even a multi-dataset column chart or stacked columns. Where do you even start? Perhaps with Charts.css, a CSS data visualization framework that uses CSS utility classes to style HTML elements as charts.
Charts.css是一个用于数据可视化的现代 CSS 框架。（大图预览）
该框架由 Lana Gordiievski 和 Rami Yushuvaev 创建，支持多种图表类型，没有任何依赖关系，并且非常轻量。它还包括有关其 组件 和 内置图表类型的 详尽文档，以及 GitHub 的源代码（在 MIT 许可下）。如果你想要更具创造性的方法，Preethi 还在 CSS-Tricks 上介绍了如何创建具有有趣形状的 CSS 图表。
新的 CSS 样式重置
你用什么来标准化跨浏览器的样式？最近，有一些可以减少全局 CSS 重置大小的新方法，也许它们也适用于你的项目。
Andy Bell 分享了一种 将 CSS 重置减少到最低限度的策略。（大图预览）
在他的 现代 CSS 重制中 ，Andy Bell 通过添加盒模型规则、移除默认边距、设置核心根元素默认值和 body 默认值，将 CSS 重置内容减少到最低限度。与此同时，Andy 为不想看到它们的人删除了所有动画、过渡和平滑滚动，并在默认情况下添加了诸如scroll-behavior和`text-decoration-skip-ink 的现代 CSS 属性。
Elad Shechter的新 CSS 重置采用了稍微激进的方法。Elad 删除了我们在特定 HTML 元素上获得的除了display property以外的所有默认样式，这两种方法都值得研究！
使用 CSS 实现稳定的滚动条间距
啊，老生常谈的布局偏移问题！正如 Bramus Van Damme介绍的那样，布局变化的一个稍微模糊的原因是由于网页上不同类型的滚动条。虽然 iOS/macOS 上的滚动条覆盖在内容上（默认情况下不显示），但其他滚动条放置在“滚动条装订线”中，即内边框边缘和外填充边缘之间的空间。
Bramus Van Damme 展示了如何使用stable scrollbar gutters防止内容移动。（大图预览）
当一个盒子中的内容变得过大时，默认情况下，浏览器会显示一个滚动条。在后一种情况下，它将导致布局偏移。幸运的是，这个问题可能很快就会消失。来见见这个全新的scrollbar-gutter属性：通过将其设置为stable，我们可以让浏览器始终显示滚动条间距，即使盒子没有溢出。
为了保持对称，我们可以使用scrollbar-gutter: stable both-edges. 该功能尚不可用，但很快就会在 Chromium 中推出，其他渲染引擎有望很快跟进。
这些可以添加 CSS 动画的内容令人惊讶
当你想给 CSS 属性添加动画时，你会想到哪些？Will Boyd 从不同的视角研究了这个问题，他决定研究那些不会立即想到的属性，那些通常与动画无关的属性，但结果证明它们是可以动画的。
使用z-index动画重叠的卡片是CSS 动画可以做的令人惊讶的事情之一。（大图预览）
在他的文章“ CSS 动画令人惊讶的事情”中，Will 深入探讨了这些出乎意料的可动画属性——当然，还有你可以通过动画制作的漂亮的东西。z-index例如，可用于分层动画，opacity帮助您仅使用 CSS 淡出模态。一个很好的提醒，CSS 是多么强大。
学习资源
学习永远不会停止，对吧？下面我们打包了一些有用的、而且很有趣，非常适合将你的 CSS 技能提升到新水平的资源。如果你已经是一名 CSS 专家，那么将你的知识用于测试也存在挑战。享用吧！
CSS 词汇和备忘单
你可能经历过，正当你在紧迫的期限内工作时，需要快速查找某些内容。对于 CSS，CSS Tricks Almanac永远不会出错，你还可以查找来自芬兰的 Ville V. Vanninen 收集的CSS 词汇。
CSS Vocabulary可帮助你在使用 CSS 时找到正确的词。（大图预览）
以有趣的方式学习 flex box
青蛙，僵尸和塔有什么共同点？好吧，他们是您学习 Flexbox 时最好的朋友。因为，老实说：一旦你理解了 Flexbox，它就非常强大，但要掌握它可能非常困难。所以让我们的学习变得更有趣吧。
在一些友好的小青蛙的帮助下，学习 Flexbox 变得容易。（大图预览）
在Flexbox Froggy游戏中，你可以通过编写 CSS 来帮助一只小青蛙和它的朋友们找到它们的睡莲。游戏包含 24 个关卡，带你从 Flexbox 定位的基本知识到更高级的挑战。
如果僵尸更接近你的偏好，Flexbox Zombies适合你。游戏的每个部分都会解开部分情节，引入新的 Flexbox 概念，并呈现所谓的**“僵尸生存挑战”**，帮助你巩固新技能。
最后但并非最不重要的一点是，你可能也想看看Flexbox Defense。受到塔防游戏的启发，你的目标是阻止入侵的敌人越过你的防御——当然，通过使用 CSS 定位您的塔。所有这三个游戏都可以在您的浏览器中运行。快乐 flexbox'ing 吧！
CSS 网格、CSS 选择器和其他挑战
想将你的 CSS 技能提升到一个新的水平吗？从字面上看，这三个小游戏可以帮助您做到这一点。在格子花园中，您将成为胡萝卜园的骄傲主人。28 个关卡等着你，你需要在 CSS 网格的帮助下照顾好你的作物。
如果你想测试你的 CSS 技能，CSS Battle 是一个完美的地方。（大图预览）
如果觉得你的 CSS 选择器技能需要改进，CSS Diner 适合你。盘子、苹果、泡菜——在 32 个挑战中的每一个中，你都需要使用不同的 CSS 选择器来选择表格上的特定项目。
如果你想参加一些竞赛，一定要看看 CSSBattle。在CSS 高尔夫游戏中，你将使用 CSS 技能以尽可能少的代码直观地复制目标，从而登上排行榜的首位。每一个挑战专用于一个特定的主题像是visibility，display，transition，或z-index。
总结
你最近是否遇到过改变你应对特定挑战方式的 CSS 资源或技术？请在下面的评论中告诉我们！我们很想听听。
