针对常见 UI 挑战的智能 CSS 解决方案

看到我们今天可以用 CSS 做什么真是令人难以置信，特别是如果你还记得曾经很难弄清楚堆叠上下文或为什么边距折叠以及为什么top: float不起作用。 在这篇文章中，我们将只看：我们可以用 CSS 做的令人兴奋和有趣的事情，探索我们在工作中必须面对的常见问题和用例。

使用 CSS 实现更丰富、逼真的阴影

阴影有助于传达意义并为 UI 添加额外的价值。 然而，我们现在在网络上看到的很多阴影并没有充分发挥它们的潜力。 让我们改变它！

Rob O'Leary 对所有事物的阴影进行了全面深入的探讨。 他关于 CSS Tricks 的文章探讨了光如何影响阴影以及如何定义光源——这是创建真实阴影效果的基础。 设置好基础后，您将学习如何使用阴影来唤起深度、提升元素和插入它们，如何分层阴影，当然还有哪个 CSS 属性用于哪个用例。 Rob 还研究了阴影带来的可访问性和性能影响，以及如何为它们设置动画。

关于该主题的另一篇精彩文章来自 Josh W Comeau。 为了结束那些“看起来不太像阴影的模糊灰色盒子”，正如 Josh 描述网络上大多数阴影的当前状态，他展示了如何将典型的盒子阴影转换成美丽的、栩栩如生的阴影. 让任何 UI 更具触感的小细节。

CSS 剪纸效果

如果您曾经想为标题创建剪纸效果，您可能会遇到很多困难。 也许您需要设置两个单独的div ，然后它们将相互重叠。 当然，间距需要以相对单位定义，这可能有点难以在屏幕上正确显示。

Stephanie Eckles 的 CSS Paper Cut-Out Effect 通过 CSS 自定义属性、CSS 网格、CSS 变换和一个很好的老式 CSS 函数attr()解决了这个问题。 Stephanie 在h1上使用data属性以及其中的span 。 attr()获取data -attribute 的值，然后将其用于:after -pseudo 元素中的content -property。 然后可以使用 CSS 自定义属性调整高光、阴影和颜色。 可重复使用且易于维护！

如果您对 Stephanie 和其他热爱 CSS 的优秀人士的更多魔法感兴趣，请查看 StyleStage，现代 CSS 在这里得到了应有的关注。

另外，请查看 Ahmad Shadeed 的关于思考剪切效果的文章，其中详细介绍了决定 SVG 何时更有意义以及如何在现实生活场景中实现的所有细节。 本文还提供了大量代码示例供您入门！

网络小地图

我们以前见过它们：通常位于页面顶部的小水平条。 当用户向下滚动时，水平条被填满，因此用户知道实际还剩下多少滚动。

如果我们让它更符合上下文怎么办？ 也许页面包含一些图像和视频，或者引用和不同的部分——以不同的方式突出显示它们会不会很有趣，同时还允许读者在页面上固定一个位置并在需要时跳转回来？ 好吧，Rauno Freiberg 也这么认为。

Rauno 的 web 小地图（目前仅适用于 Firefox）使得创建整个页面的小地图表示变得微不足道，同时还允许读者固定页面的部分并在它们之间导航。 为了实现它，Rauno 使用了一个实验性的 CSS 属性element()来显示来自任意 HTML 元素（目前仅在 Firefox 中可用）的实时图像。

CSS中的条件边界半径

在设计卡片时，当有足够的空间与其他卡片一起显示时，您可能希望border-radius具有相当大的值。 然而，当卡片上没有空间并且可能没有边距时——就像在较小的屏幕上可能出现的情况一样——你可能希望将border-radius减小到0 。 你将如何做到这一点？

Ahmad Shadeed 在他关于 CSS 中的条件边界半径的文章中非常详细地研究了这个问题。 最初由 Heydon Pickering 和 Naman Goel 提出的想法是使用足够大的数字来触发一种状态或另一种状态。 在较小的屏幕上，如果100vw和100%之间的差异为0 ，那么半径也将为0 ； 但如果差异较大，则将使用较大的值。 你也可以看看 CodePen。

CSS 粒状渐变

如果您想添加一些噪点以给图像带来一点纹理怎么办？ 当然，您可以将图像导出为 PNG、WebP 或 AVIF，但理想情况下，我们希望在 SVG 之上添加“噪声”，因此我们可以随时关闭和关闭噪声。

在他关于粒状渐变的 CSS-Tricks 文章中，Jimmy Chion 解释了我们如何生成彩色噪声，以仅使用 CSS 和 SVG 的闪光为渐变添加纹理。 正如 Jimmy 解释的那样，这个想法是使用 SVG 过滤器来创建噪声，然后将该噪声应用为背景。 然后我们将其分层在渐变之下，细化亮度和对比度，然后 - 瞧 - 你有渐变，逐渐抖动消失。

问题解决了！ 您还可以探索 Jimmy 设置的 Grainy Gradient 游乐场。

多线背景渐变

有些事情似乎不可能用 CSS 来做——好吧，直到有人找到一个 hack 来实现它。 就像在这种情况下：您能否实现具有不会为每行重置的渐变的多行填充文本？

是的，正如马蒂亚斯·奥特（Matthias Ott）所展示的那样。 Matthias 的解决方案有点 hacky，但由于在文本顶部添加了一个伪元素，它导致了预期的结果。 一个有趣的想法。

没有轮廓的表单字段焦点

谁说表格一定要枯燥？ Hakim El Hattab 创建了一个演示，证明即使是像要求姓名、电子邮件和密码这样简单的表格，也是一个跳出框框思考并迎合快乐火花的机会。

为了实现这一点，Hakim 将表单焦点和验证结合在一个微妙但令人惊讶的动画中，该动画在字段本身上没有任何焦点轮廓。 相反，一个点标记了焦点所在的字段。 当焦点切换到另一个字段时，会触发动画，点会跳转到新的活动字段，从而在两者之间建立联系。 表单字段验证也无缝集成，点展开并显示复选标记。 如果您想深入了解代码，Hakim 还在 Codepen 上发布了一个演示。 鼓舞人心！

过渡 CSS 渐变

如果您曾经尝试过在 CSS 中转换渐变，您可能已经注意到它实际上不起作用。 变化不是从一个渐变逐渐消失到另一个渐变，而是立即发生，突然发生，两者之间没有平滑过渡。

正如 Keith J. Grant 发现的那样，我们可以通过巧妙的解决方法实现过渡。 为此，我们使用伪元素和不透明度变换。 首先，我们对元素应用一个渐变，然后定位其伪元素以填充元素，然后对其应用第二个渐变。 我们通过过渡伪元素的不透明度在两个渐变之间“过渡”。 您可以在 CodePen 上查看完整的工作示例。

使用image-set()提高图像性能

你听说过image-set()吗？ 你可以把它想象成一个 CSS 背景，相当于img标签的 HTML srcset属性。 基于 Chromium 的浏览器和 Safari 已经支持它好几年了，最近 Firefox 紧随其后。 Ollie Williams 看看今天我们能做什么，不能做什么。

正如 Ollie 所描述的， image-set()的一个用例是提供背景图像的多种分辨率，并将其留给浏览器来决定将哪个图像提供给用户——一个高分辨率版本的用户在花哨的设备上和一个例如，低分辨率图像适用于连接速度较慢或像素密度较低的屏幕。

不幸的是，另一个非常有前途的用例仍然缺乏浏览器支持：使用新图像格式（如 AVIF、WebP 或 HEIF）同时为旧浏览器添加回退的想法。 如果您今天已经想实现类似的目标并且不需要background-image ，那么<picture> 正如 Ollie 所建议的，element 可能是一个值得考虑的替代方案。 一个伟大的阅读，以帮助您提高图像性能。

剪辑路径弹出效果

使用主流浏览器支持的clip-path: path() ，是时候发挥创意了。 Mikael Ainalem 展示了一个相当新功能的漂亮用例：黄油般光滑的弹出效果。

Mikael 使用clip-path: path()将人的照片与其圆形背景分开。 当您将鼠标悬停在它上面时，人似乎从圆圈内部升起，营造出酷炫的 3D 印象。 非常适合“关于我们”页面。

异想天开的 3D 按钮

细节很重要。 设计一个可爱的按钮似乎不是一项复杂的工作：这里和那里的一些填充、时髦的颜色、易于访问的文本和一些按钮状态。 好吧，Josh Comeau 一直致力于设计一个真正异想天开的 3D 按钮，您可能想要多次单击它。

这个想法很简单：我们先创建两个层，然后稍微偏移前景层。 在悬停时，我们将前层向下移动。 然后，我们使用outline-offset调整焦点轮廓，或者使用:focus:not(:focus-visible)在按钮获得焦点且用户使用指针设备时隐藏轮廓。

然后我们在按钮悬停时将按钮向上移动几个像素，对变换进行动画处理，调整贝塞尔曲线以进行动画处理并添加一些模糊，以获得更柔和、更自然的阴影。 瞧——我们有一个可访问的异想天开的 3D 按钮，可在移动设备和桌面设备上使用，并且很高兴点击和单击。 当然，您可以在 Josh 的博客上找到完整的代码片段。

CSS 图表

也许您需要设计柱形图、条形图，甚至是多数据集柱形图或堆积柱形图。 你甚至从哪里开始？ 也许与 Charts.css 一起使用，这是一个CSS 数据可视化框架，它使用 CSS 实用程序类将 HTML 元素样式化为图表。

该框架由 Lana Gordiievski 和 Rami Yushuvaev 创建，支持多种图表类型，没有依赖关系，而且非常轻量级。 它还包括关于其组件和内置图表类型的完整文档，源代码可在 GitHub 上获得（在 MIT 下获得许可）。 如果您需要更多创意方法，Preethi 还解释了如何在 CSS-Tricks 上创建具有有趣形状的 CSS 图表。

新的 CSS 重置

您使用什么来规范跨浏览器的样式？ 最近，有一些新方法可以减少全局 CSS 重置的大小，也许它们也适合您的项目。

通过他的 Modern CSS Reset，Andy Bell 通过添加框大小规则、删除默认边距、设置核心根默认值和正文默认值，将 CSS 重置减少到最低限度。 与此同时，Andy 为不想看到它们的人删除了所有动画、过渡和平滑滚动，并默认添加了现代属性，如scroll-behavior和text-decoration-skip-ink 。

Elad Shechter 的新 CSS 重置采用了一种更激进的方法。 Elad 删除了我们在特定 HTML 元素上获得的所有默认样式，除了display property 。 这两种方法都值得研究！

使用 CSS 的稳定滚动条装订线

啊，好的布局改变了！ 正如 Bramus Van Damme 解释的那样，布局变化的一个稍微模糊的原因是由于 Web 上不同类型的滚动条。 虽然 iOS/macOS 上的覆盖滚动条放置在内容之上（默认情况下不显示），但其他滚动条放置在“滚动条间距”中，即内边框边缘和外填充边缘之间的空间。

当一个框的内容变得太大时，浏览器将默认显示一个滚动条。 在后一种情况下，它将导致布局偏移。 幸运的是，这个问题可能很快就会消失。 遇到一个闪亮的新scrollbar-gutter属性：通过将其设置为stable ，我们可以让浏览器始终显示滚动条排水沟，即使盒子没有溢出。

为了保持对称，我们可以使用scrollbar-gutter: stable both-edges 。 该功能尚不可用，但很快就会在 Chromium 中推出，其他渲染引擎有望很快推出。

CSS可以动画的令人惊讶的事情

当您想到动画 CSS 属性时，您会想到哪些？ 威尔·博伊德（Will Boyd）从不同的角度看待这个问题，并决定探索那些不会立即出现在脑海中的属性，即那些通常与动画不相关但结果是可动画的属性。

在他的帖子“CSS 可以动画化的令人惊讶的事情”中，Will 深入探讨了这些意想不到的动画属性——当然，还有通过动画化它们可以做的漂亮事情。 例如z-index可用于分层动画， opacity可帮助您仅使用 CSS 淡出模态。 很好地提醒了 CSS 的强大。

学习资源

学习永远不会停止，对吧？ 下面我们编译了一些有用且有趣的内容！ — 非常适合让您的 CSS 技能更上一层楼的资源。 如果你已经是一名 CSS 专业人士，那么在测试你的知识方面也存在挑战。 享受！

CSS 词汇和备忘单

你可能以前去过那里。 就在您在紧迫的期限内工作时，您需要快速查找一些内容。 对于 CSS，CSS Tricks Almanac 永远不会出错，您还可以查找来自芬兰的 Ville V. Vanninen 收集的 CSS 词汇表。

以有趣的方式学习 Flexbox

青蛙、僵尸和塔有什么共同点？ 好吧，他们是你学习 Flexbox 时最好的朋友。 因为，老实说：一旦你理解了 Flexbox，它就非常强大，但要做到这一点可能相当困难。 因此，让我们让学习变得更有趣。

在 Flexbox Froggy 游戏中，你帮助一只小青蛙和它的朋友们通过编写 CSS找到它们的睡莲，你猜对了。 游戏包含 24 个关卡，带您从 Flexbox 定位的基础知识到更高级的挑战。

如果僵尸更靠近你的小巷，Flexbox Zombies 适合你。 游戏的每个部分都解开了部分情节，引入了新的 Flexbox 概念，并提出了所谓的“僵尸生存挑战” ，帮助您巩固新技能。

最后但同样重要的是，您可能还想看看 Flexbox Defense。 受塔防游戏的启发，你的工作是阻止来袭的敌人越过你的防御——当然，通过 CSS 定位你的塔。 这三款游戏都可以在您的浏览器中运行。 快乐的弹性装箱！

CSS Grid、CSS 选择器和其他竞赛

你想把你的 CSS 技能提升到一个新的水平吗？ 这三个小游戏可以帮助您做到这一点——从字面上看。 在 Grid Garden 中，您将成为胡萝卜花园的骄傲拥有者。 28 个关卡等着你，你需要在 CSS 网格的帮助下照顾好你的作物。

如果你觉得你的 CSS 选择器技能需要一些改进，那么 CSS Diner 就是为你准备的。 盘子、苹果、泡菜——在 32 个挑战中的每一个中，您都需要使用不同的 CSS 选择器来选择桌子上的特定项目。

如果您准备参加一些比赛，请务必查看 CSSBattle。 在CSS 高尔夫游戏中，您将使用您的 CSS 技能以尽可能少的代码直观地复制目标，从而登上排行榜的顶端。 每个挑战都专门针对特定主题，例如visibility 、 display 、 transition或z-index 。

包起来

您最近是否遇到过改变您应对特定挑战方式的 CSS 资源或技术？ 在下面的评论中让我们知道！ 我们很想听听。