Wie wird ein allgemeiner Ansatz zum Erreichen eines Effekts von Photoshop über CSS festgelegt?

Question

Unser Designer bevorzugt Webdesigns in .psd (Photoshop). Wenn wir ein Seiten-Markup und Stile erstellen, müssen wir in der Regel zugunsten der verfügbaren Tools Kompromisse eingehen. Sicher hängt das später von der Fähigkeit der Person ab, die die Seite einführt, aber was ist der allgemeine Ansatz für Forschung und das Erreichen der richtigen CSS-Technik, um das Design zu implementieren?

Das ein Beispiel ist die folgende: In Photoshop, ein textbasiertes sieht Login-Button, wie dies als Endergebnis:

Dies ist im Grunde ein [T] (Text) Element mit dem angewendeten Effekt (Fx). Der Effekt Farbüberlagerung ist, die wie folgt festgelegt werden angezeigt:

Ohne diesen Effekt sieht die Login-Seite in PSD wie folgt aus:

was genau das ist, wie es aussieht auf unserer Seite im Browser. Wenn wir es so aussehen lassen wollen, wie es beim finalen .psd-Design der Fall ist, wie sollen wir uns auf die Suche nach dem richtigen CSS-Beispiel machen?

Wir haben den Login-Link als <button> Element mit einer bestimmten .css-Klasse implementiert. Ich habe mit backgound-blend-Modus versucht gehen: normal wie folgt aus:

.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; 
} 

aber es gibt die folgende Blick in Chrome:

Mir ist klar, dass das Problem wahrscheinlich im Zusammenhang mit Die Tatsache, dass wir Web-Font-Technik verwenden und nicht durch das Styling im Browser beeinflusst wird, genauso wie Text in Photoshop, aber ich würde mich über einen Hinweis freuen, wie man das oben beschriebene Problem angehen kann. Vielen Dank.

Answer 1

Versuchen Sie es mit Adobe Brackets es ist praktisch, wirklich, während ein psd schneiden. Es hat viele coole Funktion und es würden Sie mit CSS Hinweise geben, so dass Sie das gleiche Ergebnis wie die .psd erreichen

Download brackets from here

Answer 2

diese CSS auf den Text anwenden:

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