Relief spends one axis — depth — on meaning. This page shows the whole recipe in four samples, one of which is deliberately the wrong one, then the controls that recipe produces.Relief 把凹凸这一个维度全部花在表意上。这一页先用四个样本摊开整个配方(其中一个是故意做错的),再给出这个配方做出来的控件。
The whole style rests on one pair of opposing shadows: light up-left, dark down-right. A block sharing the page's own surface colour then reads as pushed up out of it. Add inset to both and the same block reads as pressed in. Sample A is the near miss — a gradient fill with a single drop shadow, which is claymorphism: with no light edge it always looks stuck onto the page rather than risen out of it.整个风格只靠一对方向相反的阴影:左上放亮、右下放暗。一块和页面同底色的方块,就这样被顶了出来。两道都加 inset,同一块就成了按下去的。A 是那个差一点的做法 —— 渐变填充加一道落影,那是 claymorphism:没有亮的那条边,它永远看着是贴在页面上,不是从页面里长出来的。
no light edge — reads as stuck on边缘没有亮面,看着是「贴上去的」
-9px -9px light +亮 + 9px 9px dark暗
same two shadows, each with同样两道,各加一个 inset
B plus one outer drop shadow, lifting the block off the groundB 再加一道外落影,把块抬离底面
A control's background must be exactly the page background. This is the one hard constraint that separates relief from every other style — give a control its own fill and the depth disappears on the spot. The single exception is the accent control: it stands out by colour, and does not ask depth to do the work.控件的底色必须和页面底色一模一样。这是把这个风格和别的风格分开的唯一硬约束 —— 一旦给控件单独填色,凹凸当场消失。唯一的例外是强调色控件:它靠颜色本身跳出来,不要求凹凸去干这个活。