如何制作图像背景浮雕效果

Question

我真的不知道如何命名我的问题，但我有一个 psd 文件看起来像这样：

上图中的每个项目都是这样的单个图片：

我对此没有很好的说明，这就是我所知道的。所以我一直在想也许我可以将整个图像用作精灵背景。

请分享您的想法如何实现这样的目标，如果您熟悉，请准确编辑问题名称，因为我不能。

由于

Answer 1

以下是一篇很棒的文章，使用text-shadow：7 Great CSS based text effects using the text-shadow property

来完成此任务

以下是一个示例：Hello World example

代码：

h1 {
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    color: #9c8468;
    opacity: 0.3;
    font: 80px 'Museo700';
}

我没有包含正确的字体，但你明白了。

Answer 2

这就是你做的......我只是在Photoshop中做到这一点，结果非常好。它可以在CSS中重复。

<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>

这些图像中的每一个都应该是不同的颜色。前面，就是这样。中，深灰色，背面，白色。

使用CSS将它们放在同一个位置，但偏移几个像素。

#front {
    top:5px;
    left:5px
}
#middle {
    top:3px;
    left:5px
}
#bottom {
    top:7px;
    left:5px
}

Answer 3

CSS现在有过滤器。 （尚未完全支持）
  view example
  view notation

您可以使用 drop-shadow

• box-shadow 即使透明的.svgs也保留了方形阴影。
• 的工作方式类似于 text-shadow ，但适用于矢量图像（.svg）

旁注：由于尚未完全支持，请使用图像编辑软件。