如何確定通過css實現Photoshop效果的一般方法？

我們的設計師更喜歡在.psd（Photoshop）中提供網頁設計。當我們開始創建頁面標記和樣式時，我們通常必須妥協設計，以利用可用的工具。當然後者取決於實現該頁面的人的技能，但是給出以下示例，研究和獲得正確的CSS技術來實現該設計的一般方法是什麼？如何確定通過css實現Photoshop效果的一般方法？

所討論的例子如下：在Photoshop中，基於文本的登錄按鈕看起來像這樣作爲最終結果：

這基本上是一個[T]（文本）元素將效果（Fx）應用於它。其效果是，似乎是這樣設置的顏色疊加：

如果沒有這種效果，PSD登錄頁面看起來是這樣的：

這也正是它的外觀在我們的瀏覽器頁面上。如果我們想讓它看起來與最終的.psd設計完全一樣，我們如何尋找正確的css-technique示例？

我們使用給定的.css類實現了登錄鏈接爲<button>元素。我試着去與backgound，混合模式：正常是這樣的：

.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中文本受到影響的方式相同，但我希望提供關於如何解決上述問題的提示。謝謝。

來源

2016-04-09 Maxim V. Pavlov

這個問題是不是太廣，意見或根據需要討論，所以是關閉堆棧溢出的主題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

雖然我同意@Paulie_D; CSS3支持文字陰影。只需製作部分不透明的白色文字陰影即可。 –

嘗試使用Adobe括號真的派上用場，而切一個PSD。它有很多很酷的功能的，它會爲你提供CSS提示，這樣就可以達到相同的結果.PSD

Download brackets from here

來源

2016-04-18 07:13:36 Rasik

將這個CSS用於文字：

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

來源

2016-04-09 13:32:29 JoostS

如何確定通過css實現Photoshop效果的一般方法？

回答

相關問題