CSS的凸版印刷效果

Question

我想制作像这样的凸版印刷效果：  在CSS中。但我似乎找不到合适的文字阴影。

单词的颜色：＃2f4050 背景颜色：＃4f6478

我试过了：

.letterpress {
    color:#2f4050;
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    font-size:70px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    text-align:center;
    text-shadow:#4f6478 0 1px 5px; 
}

但这似乎没有办法。

Answer 1

.letterpress {
    color:#2f4050;
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    font-size:70px;
    text-align:center;
    text-shadow: 0 1px 1px #fff; 
}

应该这样做。顺便说一句。您不必声明“正常”值对

Answer 2

有两个阴影。尝试像

这样的东西

text-shadow: 1px 1px rgba(255,255,255,0.2), -1px -1px rgba(0,0,0,0.5);

这应该在右下方给出一个透明的白色阴影，在左上角给出一个透明的黑色内部阴影。

Answer 3

为阴影使用较浅的颜色，减少模糊。类似的东西：

text-shadow: 1px 1px 2px #6ab;

Answer 4

您的文字阴影与背景颜色相同。您应该使用较浅的颜色，如#809bb5。或者您可以使用rgba值，例如text-shadow: 0 1px 5px rgba(255,255,255,0.4);。最后一个数字是alpha透明度（不透明度）。

我略微调整了阴影...... http://jsfiddle.net/qmqF5/

Answer 5

这里的问题很简单。

您为背景颜色和文字阴影提供相同的颜色。

与背景相比，文本阴影的颜色更浅，文本颜色可以解决问题。

谢谢。

Answer 6

要创建凸版印刷效果，我们需要添加一个比文本颜色更浅的阴影，以确保效果正常。