9

我想制作这样的凸版效果： http://img208.imageshack.us/img208/6421/letterpress.png 在 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; 
}

但这似乎并没有奏效。

4

6 回答 6

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

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

于 2012-05-31T09:33:34.723 回答
5

有两个影子。尝试类似的东西

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

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

于 2012-05-31T09:34:23.970 回答
0

为阴影使用较浅的颜色，并减少模糊。就像是：

text-shadow: 1px 1px 2px #6ab;
于 2012-05-31T09:32:12.097 回答
0

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

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

于 2012-05-31T09:33:07.483 回答
0

这里的问题很简单。

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

与背景和文本颜色相比，为文本阴影提供更浅的颜色解决了这个问题。

谢谢你。

于 2012-05-31T09:36:52.300 回答
-1

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

于 2013-12-22T10:29:30.287 回答