CSS文本雕刻或按下效果

Question

如果有人来这里 - http://djangocon.us/。在顶部，djangocon标志就在那里。这个标志都是文字＆amp;文字就像压在里面。它有点被雕刻成感觉。

我已经研究过CSS＆amp;没有得到什么财产可能会导致这种影响。有人知道吗？

更新：看起来我弄错了。顶部的徽标是图像。但是下面的文字不是。给出相同的按下文本。深绿色矩形框（在导航栏下方）。

Answer 1

使用text-shadow: 0 1px 0 color;，您将获得相同的效果。

如果您需要更多信息，请查看http://www.css3.info/preview/text-shadow/

Answer 2

文字阴影是正确的。我经常使用它，它可以产生一些有趣的效果（虽然它不应该依赖于任何关键的东西，因为浏览器支持尚未完成）。

然而，正如其他海报所述，您链接的图像很好......图像。您可以使用图层上的混合选项在Photoshop中轻松完成此效果，并使用不模糊的阴影或斜角/浮雕设置进行播放。这是完成任务的更可靠方式，因为浏览器中的图像支持显然比CSS 3支持更广泛。

我经常会在图片的一侧犯错一些重要的东西，如徽标或主要公告。此外，您可以使用图像控制抗锯齿，这是您无法完全控制使用CSS 3的东西（尽管大多数基于浏览器的抗锯齿都非常好）。

在页脚中使用text-shadow的更好示例。以下是Chrome的计算样式：

Answer 3

您需要text-shadow属性。 http://www.quirksmode.org/css/textshadow.html

编辑：但显然您链接的页面实际上是使用图像来完成它。 http://djangocon.us/site_media/static/img/header.png

Answer 4

快速查看firebug，它是text-shadow属性。我自己从未使用过它。

Answer 5

使用text-shadow属性可以实现文本压缩效果。请参阅此示例http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

Answer 6

我发现

http://css3please.com是记住这些内容的最简单方法。