如何用 CSS 创建文件夹“切口”效果

当你把一些东西 - 比方说一张普通的纸 - 放进一个牛皮纸文件夹时，这件东西的一部分可能会从文件夹里露出来一点。钱包和信用卡也是一样的。卡片会略微突出，这样你就可以快速查看你随身携带的卡片。

我把这种效果叫做“切口”。切口就是我们创造一种视觉元素从切口里露出的一种错觉。我们可以在 CSS 中实现这种效果！

设计中的关键部分是阴影，它提供了视觉暗示，表明存在一个切口。然后是切口盖，它为展示的元素从下方露出的空间。

以下是我们将共同创建的效果

让我们从创建阴影开始

你可能会惊讶地发现，示例中的阴影不是用实际的 CSS 阴影创建的，比如 box-shadow 或 drop-shadow() 过滤器。相反，阴影本身就是一个独立的元素，黑暗且模糊。这对于使设计更具适应性很重要，无论是在默认状态还是动画状态下。

盖是设计中的另一个元素。盖是我称之为与阴影重叠的元素。下图描述了阴影和盖是如何组合在一起的。

阴影由一个小的直立矩形组成，它有一个渐变背景。渐变在中间更暗。因此，当元素被模糊时，它会创建一个在中间更暗的阴影；因此更具立体感。

现在，重建阴影的左侧被一个位于顶部的矩形覆盖，该矩形的颜色与它容器的背景颜色完全相同。

然后，盖和阴影都向左移动了一点点，使其看起来像是分层排列的。

处理盖

为了使盖与设计的背景融为一体，它的背景颜色继承自它的容器元素。或者，你也可以尝试使用 CSS 蒙版 和 混合模式 等标准将盖与背景混合，这取决于你的设计选择和需求。

要了解这些标准是如何应用的基本知识，你可以参考以下文章：Sarah Drasner 的 “蒙版与裁剪：何时使用它们” 对蒙版进行了很好的概述。我也写过关于 CSS 混合模式的 这篇文章，你可以在其中复习一下这个主题。

在我的示例的源代码中，你会注意到我使用 CSS Grid 将 <main> 元素内的元素对齐和堆叠，CSS Grid 是我在演示中经常使用的布局标准。如果你正在重新创建类似的设计，请使用最适合你的应用程序的布局方法来对齐设计的不同部分。在本例中，我在 <main> 元素上设置了一个单列网格，这使得我能够将盖、阴影和图像居中对齐。

CSS Grid 还允许我设置所有三个 div，使它们在 <main> 容器中都是全宽的。

main > div {
  grid-area: 1 / 1;
}

这使得所有东西都堆叠在一起。通常，我们会努力避免用其他元素覆盖元素在一个网格中。但本例依赖于此。我在 .slit-cover 上设置了 50% 的宽度，这自然地露出了它下面的图像。从那里，我在它上面设置了一个 transform，使它在负方向上移动 50%，加上我之前移动阴影的小量（25px），以确保它也被显示出来。

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

就是这样！一个看起来很自然的切口，模仿着从文件夹、钱包或其他东西中露出的东西。

还有更多方法可以做到这一点！例如，Flexbox 可以将元素排列成一行并像这样居中对齐。有很多方法可以将东西并排排列。 也许你可以使用 box-shadow 属性、drop-shadow() 过滤器，甚至 SVG 过滤器 来获得相同的阴影效果，真正地创造出这种错觉。

你完全可以发挥创意，获得自己的外观和感觉。例如，尝试交换阴影和图像的位置。或者玩弄颜色组合，改变 blur() 过滤器 的值。盖和阴影的形状也可以调整 - 我敢肯定你可以创建一个弯曲的阴影而不是直的阴影，并在评论中与我们分享！