阴影调色板生成器Shadow Palette Generator

在 CSS 中创建好的阴影是一项具有挑战性的任务。有太多需要考虑的因素。我推荐你使用这个资源来生成阴影效果！它会为你提供准备好的代码，只需复制并使用即可。

Shadow Palette Generator网址：https://www.joshwcomeau.com/shadow-palette/

这里部署了一些策略，但最关键的是分层。 我们堆叠 5 或 6 个单独的阴影层，而不是单个阴影。 每个图层都使用不同的 x/y 偏移、模糊半径、扩散、颜色和不透明度值进行自定义。

即使你了解所有理论，仍然很难弄清楚将哪些数字插入所有这些设置中。 今天，使用Shadow Palette Generator就可以所见即所得的实现阴影功能。

完整的调色板

阴影调色板生成器的工作原理类似。 它产生一组 3 个阴影，代表 3 个不同的高度。 当您希望应用阴影时，您将根据您希望元素显示的高度来选择最佳值。

阴影的存在是为了给我们的应用程序带来深度感，但如果阴影不一致，这种错觉就会被破坏。 当我们使用一组有凝聚力的阴影时，我们的应用程序会感觉更加真实和有形。

更高层次的抽象

box-shadow API 是一个非常低级的 API。 您可以控制原始 x/y 偏移、模糊半径和阴影大小等内容。

当我想要创建阴影时，我通常不会考虑这些值。 相反，我专注于阴影的“感觉”。 是应该深刻而突出，还是轻盈而微妙？ 它应该是紧而脆的，还是柔软而模糊的？

阴影调色板生成器中的控件旨在让您更轻松地产生具有特定氛围的阴影。 例如，“Oomph”参数通过更改许多底层框阴影值来控制阴影的强调程度。

鼓励实验！ 玩弄控件，直到找到您喜欢的阴影。

在你的项目中使用它们

自定义一组漂亮的阴影后，您将获得如下所示的 CSS 片段：

:root {
  --shadow-color: 123deg 45% 67%;
  --shadow-elevation-low: /* Shadow CSS */;
  --shadow-elevation-medium: /* Shadow CSS */;
  --shadow-elevation-high: /* Shadow CSS */;
}

此输出使用 CSS 自定义属性，可以轻松地在整个应用程序中重用阴影值。

您可以将这段 CSS 复制到全局 CSS 文件中，然后应用阴影，如下所示：

.subtle-box {
  box-shadow: var(--shadow-elevation-low);
}
.in-your-face-box {
  box-shadow: var(--shadow-elevation-high);
}

浏览器支持

阴影调色板生成器生成的阴影将在桌面和移动设备（Chrome、Firefox、Safari 和 Edge）上的所有现代浏览器上渲染。

阴影不会在 Internet Explorer 等较旧的浏览器中显示。 这是因为输出严重依赖 CSS 自定义属性，而 IE 不支持这些属性。

即使您的网站/应用程序需要支持 Internet Explorer，我也鼓励您使用此工具。 阴影可以被认为是渐进增强； 毕竟，即使没有阴影，该产品仍然应该完全可用！

动态色调颜色

阴影调色板生成器允许您选择自定义背景颜色。 然后它会根据该背景颜色生成阴影色调。 这有助于阴影与背景“融合”，产生更自然的效果。