如何使用CSS制作文件夹'缝制”效果

模拟纸张从文件夹中微微露出的效果，或者信用卡从钱包中略微伸出的视觉效果，这在设计中被称为“裂缝”效果。 通过CSS，我们可以巧妙地创建这种视觉错觉，让元素看起来像是从一个开口中探出。

设计的关键在于阴影，它提供了视觉线索，暗示着存在一个裂缝。然后是覆盖裂缝的元素，为从下方窥视的元素提供空间。

我们将一起创建一个这样的效果：

首先创建阴影

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

另一个元素是覆盖层，它重叠在阴影之上。下图显示了阴影和覆盖层是如何组合在一起的。

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

现在，重现的阴影的左半部分被顶部的一个矩形覆盖，该矩形的颜色与其容器的背景颜色完全相同。

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

处理覆盖层

为了使覆盖层与设计的背景融合，它的背景颜色继承自其包含元素。或者，根据您的设计选择和要求，您也可以尝试使用CSS蒙版和混合模式等标准来使覆盖层与其背景融合。

有关如何应用这些标准的一些基础知识，您可以参考以下文章：Sarah Drasner的“Masking vs. Clipping: When to Use Each”提供了关于蒙版的优秀入门介绍。我还在这篇文章中写过关于CSS混合模式的内容，您可以在其中复习相关主题。

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

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

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

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

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

就是这样！一个看起来非常自然的裂缝，模拟了从文件夹、钱包或其他任何东西中窥视出来的东西。

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

您可以随意调整它以获得自己的外观和感觉。例如，尝试交换阴影和图像的位置。或者玩弄颜色组合并更改blur()过滤器的值。覆盖层和阴影的形状也可以进行调整——我相信您可以创建一个弯曲的阴影而不是直线阴影，并在评论中与我们分享！

以上是如何使用CSS制作文件夹'缝制”效果的详细内容。更多信息请关注PHP中文网其他相关文章！