【问题标题】：Letter Press Effect字母印刷效果
【发布时间】：2012-08-11 09:01:02
【问题描述】：

我似乎无法获得正确的颜色值/名称，因此我可以在文本上获得 Letter Press 效果。

要创建已标记文本的外观，请选择一个文本比背景深的颜色，然后创建一个 1px 的文本具有 1px 模糊的阴影并将其向下偏移 1px。制作文字阴影比背景略亮

background-color: rgba(255, 255, 255, 0.8);
color: #222;
text-shadow: 1px 1px 1px #FFFFFF;

目前我只得到这个

我会怎么做

查找比背景深的文本颜色。背景颜色为 rgba (255, 255, 255, 0.8)，文字颜色为 #222。
查找比背景更亮的文本阴影颜色。背景颜色为rgba（255、255、255、0.8），文字阴影颜色为#FFFFFF；

我需要将文本颜色（当前 #222）更改为较暗的颜色，并将文本阴影颜色（当前 #FFFFFF）更改为较浅的背景颜色（当前为 rgba 255、255、255、0.8）。我无法将背景颜色更改为其他颜色。

没有设计功底，可能有人会如何改变文字的颜色值以及文字阴影来产生更明显的凸版效果。

谢谢

【问题讨论】：

我想这看起来不无道理：jsfiddle.net/userdude/JPhmN
@Jared Farrish：谢谢，但这真的不是那么明显。也许像midwinter-dg.com/…
这看起来好一点：jsfiddle.net/userdude/JPhmN/1 部分问题是您选择的背景；很难看到白色边框。
你现在有凸版效果，你还想要什么？
也许：jsfiddle.net/userdude/JPhmN/2

标签： html colors css

【解决方案1】：

使用一些文本阴影来愚弄 ---

http://jsfiddle.net/sheriffderek/bTZs9/1/

模糊实际上取决于字体大小...并且使用 rgba 颜色有助于消除猜测工作，以找到与纸张颜色匹配的不同色调...

【讨论】：

我想更改上面的链接，但它不会让我。看到这个，而不是为未来的人寻找这个。 jsfiddle.net/sheriffderek/bTZs9
谢谢你。它帮助很大。不过不能再投票了。

【解决方案2】：

有点花哨，但你可以使用伪元素：

JSFiddle

http://jsfiddle.net/Asustaba/MLEwp/

CSS

#戳{ 显示：块；白颜色; 字体：3em Arial，无衬线；位置：相对； } #stamped：之前，#text：之后{ 内容：attr（标题）；颜色：#222；位置：绝对； } #stamped：之前{顶部：1px；左：1px； } #stamped:after { top: 2px;左：2px； }

HTML

牛场

【讨论】：

【解决方案3】：

你为什么不在文本阴影上做更少的模糊？

您正在使用：

color: #222;
text-shadow: 1px 1px 1px #FFF;

使用更少的模糊，您的文字阴影会变得更加普遍：

color: #222;
text-shadow: 1px 1px 0px #FFF;

在这种情况下，Blur 是第三个参数，您应该将其值设置为 0px 而不是 1px 以获得更类似于凸版印刷的效果。

【讨论】：

我发现这很有帮助。 line25.com/wp-content/uploads/2009/letterpress/demo/demo.html 颜色使一切变得不同...您正在尝试获得这张假想纸的光影 --- 使用更接近纸的颜色而不是白色或黑色...例如 text-shadow: 1px 1px 1px rgba (0,0,0,.5);也许在一个边缘......然后在另一边另一个......？文字阴影：-1px -1px 1px rgba(255,255,255 .5); ？？？这样你就使用了假纸的颜色？只是一个想法......

【解决方案4】：

颜色 #222 太暗了。您必须使用 #333 或 #444 来盖印墨水。而且墨水不是固体的东西。你必须用这样的东西给文本一些噪音：http://www.mightymeta.co.uk/demos/css-noise/

【讨论】：

没有多大帮助。尝试更改字体大小和字体系列，但我真的不能说它看起来像字母印刷效果。
我没有提到 font-family 或 font-size 吗？
我知道你没有提到字体系列或字体大小。我只是在大声思考。无论如何，我没有拒绝你。感谢您的帮助。