CSS 中带有 Drop-Shadow 的真实感阴影

介绍

最近，我们面临着为与 Little Thai 合作的新项目创建逼真阴影的挑战。经过广泛的研究，我们发现可用的信息并不多。我们开始使用 CSS 中的 drop-shadow 命令开发自己的技术，结果非常惊人。今天我们想与社区分享我们是如何实现这一目标的，以便每个人都能从这一进步中受益。

这部分开发的要求很明确；我们需要为 Little Thai 商店的产品提供逼真的阴影。为什么？我们的想法是创建一个数字展示柜，以便用户可以购买该公司提供的产品。该提案的想法是以俯视视角展示产品，就好像它们被放置在桌子上一样。为了使其更加真实，我们需要这些成分来产生逼真的阴影。此时，有两个选择。一方面，可以用 Photoshop 来完成。该视频解释了如何做到这一点。另一方面，它可以通过 CSS 使用新的 drop-shadow 命令来完成。

这是一个挑战，因为正如我们提到的，没有关于如何在 Photoshop 中制作逼真阴影的信息。然而，这使我们不必在 Photoshop 中编辑商店中的数十种产品，而且不必每次添加新产品时都进行编辑。那是怎么做到的？

技术

CSS 中的 drop-shadow 命令是为图形元素添加阴影的强大工具。然而，在寻求逼真效果时，它的使用并不总是那么简单。我们的解决方案基于应用具有不同参数的多个阴影来实现更深、更真实的效果。

使用的 CSS 代码

这是我们用来创建逼真阴影的 CSS 代码：

过滤器： drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

代码说明

第一个阴影：17px 17px 13px rgba(0, 0, 0, 0.3)：这个阴影是最大且最分散的。这些参数表示阴影在 X 轴和 Y 轴上位移 17 像素，模糊度为 13 像素，不透明度为 30%。

第二个阴影：7px 7px 4.5px rgba(0, 0, 0, 0.3)：这个阴影比第一个阴影更小，漫反射更少。参数表示阴影在 X 轴和 Y 轴上位移 7px，模糊度为 4.5px，不透明度为 30%。

这两个阴影的组合创造了一种单一阴影难以实现的深度感和真实感。

视觉示例以下是使用我们的逼真阴影技术的最终结果的视觉示例：

强调两点很重要：

— 阴影在柔和的灰色调上效果最好，而不是纯白色。

——在这种情况下，阴影是为顶视图设计的。在其他拍摄角度下效果不太好。

实际应用

该技术可用于多种环境，从在线商店中的产品图像到公司网站上的图形元素。创建逼真阴影的能力可以显着改善项目的视觉外观和感知质量。

CSS 中的在线真实感阴影生成器

您可以在 MandarinaWebs 网站找到在线生成器

结论

我们非常高兴与开发人员和设计师社区分享这项技术。我们相信，对于任何希望增强网络项目美感的专业人士来说，它都是一个有价值的工具。我们很乐意听到您的反馈，并了解您如何在自己的工作中应用此技术。

以上是CSS 中带有 Drop-Shadow 的真实感阴影的详细内容。更多信息请关注PHP中文网其他相关文章！