如何确定通过 css 从 Photoshop 实现效果的一般方法？

Question

我们的设计师更喜欢在 .psd (Photoshop) 中提供网页设计。当我们开始创建页面标记和样式时，我们通常不得不妥协设计以支持我们可用的工具。当然，后者取决于实现页面的人的技能，但给出以下示例，研究和得出正确的 CSS 技术来实现设计的一般方法是什么？

相关示例如下：在 Photoshop 中，基于文本的登录按钮最终结果如下所示：

这基本上是一个应用了效果 (Fx) 的 [T]（文本）元素。效果是颜色叠加，看起来是这样设置的：

没有这个效果，PSD 中的登录页面如下所示：

这正是它在我们的浏览器页面中的样子。如果我们要让它看起来与最终 .psd 设计中的完全一样，我们将如何寻找正确的 css-技术示例？

我们将登录 link 实现为具有给定 .css class 的 <button> 元素。我试过使用 backgound-blend-mode: normal 像这样：

.login-box .login-button {
    width: 100%;
    height: 100%;
    margin-left: 12.4vmax;
    margin-top: 0.7vmax;
    background: #5f6f8f;
    border: 0;
    outline: 0;
    font-family: "OpenSansRegular";
    color: rgb(57, 68, 98);
    font-size: 0.9vmax;
    font-weight: 700;
    background-color: #5f6f8f;
    background-blend-mode: normal;
}

但它在 Chrome 中给出了以下外观：

我意识到这个问题可能与我们使用的网络字体技术有关，它不受浏览器中样式的影响，就像文本在 photoshop 中受到影响一样，但我希望得到提示如何解决上述问题。谢谢。

Answer 1

将此 css 应用于文本：

Text-shadow: 0px 1px 2px rgba(255,255,255,0.2);

Answer 2

尝试使用 adobe brackets 它在切片 psd 时确实派上用场。它有很多很酷的功能，它会为您提供 CSS 提示，以便您可以获得与 .psd

相同的结果

Download brackets from here

如何确定通过 css 从 Photoshop 实现效果的一般方法？

How to determine a general approach to achieve an effect from Photoshop via css?

css

photoshop

styling

pixel-perfect