Page 164 - css揭秘

实际上，在最早期的图形界面中，为按钮生成按下或浮起效果就用到了
类似的原理：出现在底部的浅色投影（或者出现在顶部的暗色投影）会让人
产生物体是凹进平面内的错觉。同理，出现在底部的暗色投影（或者出现在
顶部的浅色投影）会让人产生物体从平面上凸起的错觉。这种方法之所以奏
效，是因为我们在现实世界中早已习惯了光源总是悬在头顶。在这样的环境
里，凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮。

让我们以图 5-28 中用到的两种颜色作为起点。图中文字的颜色是
hsl(210, 13%, 30%)，而背景色是 hsl(210, 13%, 60%)。

background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);

当我们在浅色背景上使用深色文字时（比如眼前的这个例子），在底部
加上浅色投影通常效果最佳。到底要多浅，取决于你用的是什么颜色，以及
图 5-28
你期望最终效果有多明显，因此需要反复尝试其透明度以达到满意效果。在
对浅色底、深色字使用凸版印刷
这个例子中，我们最终敲定为 80% 不透明度的白色；当然你也可以尝试其
效果（上图：加效果之前，下图：
他数值： 加效果之后）

background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

在图 5-28 中可以看到最终效果。在这个例子中，我们用的是像素单位，
而不是 em 单位。不过如果需要处理的文字字号跨度非常大，那么 em 单位可
能更合适。

text-shadow: 0 .03em .03em hsla(0,0%,100%,.8); 图 5-29

当文字比背景的颜色浅时，直接
如果把文字和背景的颜色深度对调，样式看起来又会如何呢？在深色
套用上述样式是得不到凸版印刷
底、浅色文字的情况下（参见图 5-29），直接套用上述投影样式看起来会非 效果的
常奇怪，会让文字显得模糊。这是不是意味着我们无法在这种场景下实现凸
版印刷效果呢？不是，这只是表明我们应该调整方法。在这种情况下，给文
字顶部加深色投影是最佳方案，效果如图 5-30 所示。CSS 代码看起来是这
样的：

background: hsl(210, 13%, 40%);
color: hsl(210, 13%, 75%);
text-shadow: 0 -1px 1px black;

试一试 play.csssecrets.io/letterpress

图 5-30
对深色底浅色字使用凸版印刷效
果（上图：加效果之前，下图：
加效果之后）

27 现实中的文字效果 133

඀ࠡ JOEC