基于3DCG，想一个逼真的box-shadow

本文概述

我感谢 Material Design，但不知怎的，我对 Shadows 的外观感到不舒服。

Material Design. 光与影。https://material.io/design/environment/light-shadows.html#shadows

因此，参考 3DCG，我将尝试重现（相对）接近现实世界中阴影的箱形阴影。

使用 3DCG 制作的示例阴影

我在 Material Design 中创建了 9 种注册为默认高程的类型。

情况是这样的。

我使用 Blender 的太阳光（一种从无限远处以相同强度发光的光）。
我通过眼睛调整了阴影的宽度和模糊度，并将光源的方向设置为从上方 15 度，角度半径设置为 20 度。

用 CSS 复制

见笔无标题通过 Keisuke 4 月 1 日（@xrxoxcxox) 上代码笔.

我没有做任何特别困难的事情。
我只是将offset-y、blur-radius、spread-radius 设置为与距离成正比。 （我不喜欢小数点，所以我相应地调整了它。）

阴影颜色的深浅不符合比例关系，所以我手动调整了它，但也许有一些很好的计算......？

<div class="container">
  <div class="panel shadow1"></div>
  <div class="panel shadow2"></div>
  <div class="panel shadow3"></div>
  <div class="panel shadow4"></div>
  <div class="panel shadow6"></div>
  <div class="panel shadow8"></div>
  <div class="panel shadow12"></div>
  <div class="panel shadow16"></div>
  <div class="panel shadow24"></div>
</div>

.container {
  align-items: center;
  background-color: #f0f0f0;
  display: grid;
  gap: 100px;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: center;
  min-height: 100vh;
  padding: 50px 0 100px;
  width: 100%;
}

.panel {
  background-color: #fff;
  border-radius: 20px;
  height: 100%;
  width: 100%;
}

.shadow1 {
  box-shadow: 0 4px 2px -2px rgb(0 0 0 / 12%);
}

.shadow2 {
  box-shadow: 0 7px 3px -3px rgb(0 0 0 / 21%);
}

.shadow3 {
  box-shadow: 0 10px 4px -5px rgb(0 0 0 / 20%);
}

.shadow4 {
  box-shadow: 0 13px 5px -6px rgb(0 0 0 / 19%);
}

.shadow6 {
  box-shadow: 0 18px 7px -8px rgb(0 0 0 / 17%);
}

.shadow8 {
  box-shadow: 0 23px 9px -10px rgb(0 0 0 / 15%);
}

.shadow12 {
  box-shadow: 0 33px 13px -14px rgb(0 0 0 / 19%);
}

.shadow16 {
  box-shadow: 0 43px 17px -18px rgb(0 0 0 / 20%);
}

.shadow24 {
  box-shadow: 0 63px 25px -26px rgb(0 0 0 / 23%);
}

比较

当你这样并排放置时，乍一看，你这次做的不是更自然吗？
我无法验证当您以复杂的方式将它们分层时会发生什么，但我觉得这种方法是可能的。

材料设计	这次我做了什么

---

感谢您阅读到最后！
我们也在推特上发送信息，所以如果你喜欢，请关注我们！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308622634.html