在css中設(shè)計好看的陰影

在本文中，我們將學(xué)習(xí)如何將典型的盒子陰影轉(zhuǎn)換為更好看的的陰影。

統(tǒng)一角度

當我們想要一個元素有陰影時，會添加box-shadow屬性并修改其中的數(shù)字，直到滿意為止。

問題是，通過像這樣單獨創(chuàng)建每個陰影，我們最終會得到一堆不協(xié)調(diào)的陰影。如果我們的目標是創(chuàng)造深度幻覺，我們需要每個陰影都匹配。否則，它看起來就像一堆模糊的邊界：

在自然界中，陰影是從光源投射出來的。陰影的方向取決于燈光的位置。一般來說，我們應(yīng)該為頁面上的所有元素決定一個單一的光源。該光源通常位于上方并稍微偏左：

如果 CSS 有一個真正的照明系統(tǒng)，我們將為一個或多個燈光指定一個位置。不過CSS 并沒有這樣的東西，但是我們可以通過指定水平偏移和垂直偏移來移動陰影。例如，在上圖中，生成的陰影具有 4px 垂直偏移和 2px 水平偏移。

這是粘性陰影的第一個技巧：頁面上的每個陰影都應(yīng)具有相同的比例。這將使每個元素看起來都由同一光源照亮。

分層

現(xiàn)代 3D 插圖工具（例如 Blender）可以通過使用光線追蹤技術(shù)來產(chǎn)生逼真的陰影和照明。在光線追蹤中，數(shù)百束光從相機中射出，在場景中的表面上反射數(shù)百次。這是一種計算成本較高的技術(shù)；生成一張圖像可能需要幾分鐘到幾小時！但是css中的box-shadow算法更加初級。它以我們元素的形狀創(chuàng)建一個盒子，并對其應(yīng)用基本的模糊算法。這樣就會使得我們的陰影看起來永遠不會像照片一樣逼真，但我們可以通過一種巧妙的技術(shù)來改進很多東西：分層。

我們不使用單個盒子陰影，而是將一些盒子陰影堆疊在一起，偏移量和半徑略有不同：

<style>
.wrapper {
  display: flex;
  gap: 32px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background-color: white;
}
  .traditional.box {
    box-shadow:
      0 6px 6px hsl(0deg 0% 0% / 0.3);
  }
  .layered.box {
    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
  }
</style>

<section class="wrapper">
  <div class="traditional box"></div>
  <div class="layered box"></div>
</section>

性能權(quán)衡
分層陰影無疑能展現(xiàn)更好的效果，但它們確實是有代價的。如果我們分層 5 個陰影，我們的設(shè)備必須多做 5 倍的工作！
這在現(xiàn)代硬件上并不是什么大問題，但它可能會減慢移動設(shè)備上的渲染速度。
與往常一樣，請務(wù)必進行自己的測試！根據(jù)我的經(jīng)驗，分層陰影不會對性能產(chǎn)生重大影響，但我也從未嘗試過同時使用數(shù)十個或數(shù)百個陰影。
另外，嘗試對分層陰影進行動畫處理可能會導(dǎo)致性能問題。

與背景色匹配的陰影

到目前為止，我們所有的陰影都使用了半透明的黑色，例如hsl(0deg 0% 0% / 0.4)，在項目中我們可能使用到非常多其他顏色。

當我們在背景顏色上疊加黑色時，它不僅會使其變暗，還會使背景顏色變暗。它也會使其飽和度降低很多。

通過匹配色調(diào)并降低飽和度/亮度，我們可以創(chuàng)建不具有“褪色”灰色質(zhì)量的真實陰影。

飽和度和亮度的關(guān)系
如果我們熟悉hsl顏色格式，就會知道飽和度和亮度是獨立控制的。但是降低亮度也會對飽和度產(chǎn)生影響。
例如，以下兩個框具有相同的飽和度百分比 (100%)，但感知的飽和度卻截然不同.

.box.one {
background-color:
 hsl(220deg 100% 70%);
}
.box.two {
background-color:
 hsl(220deg 100% 50%);
}

發(fā)生這種情況是因為在高/低亮度值下顏色中沒有那么多“顏料”。飽和度不會對整體顏色產(chǎn)生太大影響。
這在極端情況下最為明顯：

1. hsl(0deg 0% 100%)是純白色，飽和度為 0%。
2. hsl(0deg 100% 100%)也是純白色，甚至是完全飽和的。

如果我們將亮度設(shè)置為 95%，就會有差異，但很微妙：

對于非常暗的顏色也是如此：

然而，當我們處于亮度50%時，可以使用完整范圍的飽和度。

50% 的亮度是所有色調(diào)的“默認”版本。當亮度為 50% 時，亮度對飽和度沒有影響。
當我們從 50% 最佳點增加或減少亮度時，我們就會減少顏色中可用顏料的量。顏色不可能完全飽和，也不可能是淺色或深色。
飽和度百分比是一個相對測量值，基于給定亮度下可用的顏料量。
這就是為什么我們之前必須降低陰影示例中的飽和度！亮度更接近 50% 最佳點，因此可以使用更廣泛的飽和度范圍。為了保持感知的鮮艷度相同，我們必須降低飽和度百分比。文章來源地址http://www.zghlxwxcb.cn/news/detail-692001.html

到了這里，關(guān)于在css中設(shè)計好看的陰影的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！