設計
陰影要全畫面統一一個光源，顏色用同色相而不是半透明黑
全頁只用一個光源，所有陰影共用同一個位移比例；越高的元素位移越大、模糊越大、透明度越低；陰影顏色要用同色相降飽和，不用半透明黑。
怎麼做
- 作者的判斷：網路上多數陰影不夠豐富，只是模糊的灰色方塊。
- 陰影代表高度，越大的陰影代表越高。
- 高度也能引導注意力：離使用者越近的元素越先被看到。
- 每個陰影單獨調，會變成一堆互相矛盾的陰影，像模糊的邊框。
- 第一個解法：全頁決定一個光源，常見位置是左上方。
可以怎麼用
日出主題圖卡上的標題卡片或圓形光暈，全用同一個左上光源，陰影改用同色相暖棕而不是黑。
可直接複製的素材
<style>
.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>
可直接複製的素材
<style>
body {
background-color:
hsl(220deg 100% 80%);
}
.black.box {
--shadow-color: hsl(0deg 0% 0% / 0.5);
}
.darker.box {
--shadow-color: hsl(220deg 100% 50%);
}
.goldilocks.box {
--shadow-color: hsl(220deg 60% 50%);
}
.box {
filter: drop-shadow(
1px 2px 8px var(--shadow-color)
);
}
</style>
可直接複製的素材
<style>
.first.box {
width: 50px;
height: 50px;
box-shadow:
0.5px 1px 1px hsl(220deg 60% 50% / 0.7);
}
.second.box {
width: 100px;
height: 100px;
box-shadow:
1px 2px 2px hsl(220deg 60% 50% / 0.333),
2px 4px 4px hsl(220deg 60% 50% / 0.333),
3px 6px 6px hsl(220deg 60% 50% / 0.333);
}
.third.box {
width: 150px;
height: 150px;
box-shadow:
1px 2px 2px hsl(220deg 60% 50% / 0.2),
2px 4px 4px hsl(220deg 60% 50% / 0.2),
4px 8px 8px hsl(220deg 60% 50% / 0.2),
8px 16px 16px hsl(220deg 60% 50% / 0.2),
16px 32px 32px hsl(220deg 60% 50% / 0.2);
}
</style>
注意：原文談網頁 UI 元件。
來源：Josh W. Comeau，2021-09-13｜看原文