Как определить общий подход для достижения эффекта от Photoshop через css?

Question

Наш дизайнер предпочитает создавать веб-проекты в формате .psd (Photoshop). Когда мы создаем разметку страницы и стили, нам обычно приходится компрометировать дизайн в пользу доступных нам инструментов. Несомненно, что позже зависит от умения человека, который реализует страницу, но, учитывая следующий пример, каков общий подход к исследованиям и приходят к правильной методике CSS для реализации дизайна?

Пример в вопросе заключается в следующем: В Photoshop, текстовая кнопка Войти выглядит это как конечный результат:

В основном это элемент [T] (текст) с эффектом (Fx), примененным к нему. Эффект цвета наложения, что, как представляется, устанавливается следующим образом:

Без этого эффекта, страница Войти в PSD выглядит следующим образом:

Какой именно то, как это выглядит на нашей странице в браузере. Если мы хотим, чтобы он выглядел точно так же, как в финальном проекте .psd, как мы должны подходить к поиску правильного примера CSS-техники?

Мы внедрили ссылку для входа в систему как элемент <button> с заданным классом .css. Я пытался идти с 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:

я понимаю, что проблема, вероятно, связано с тот факт, что мы используем технику веб-шрифтов, и на нее не влияет стилизация в браузере, так же, как текст влияет на фотошоп, но я хотел бы получить подсказку о том, как подойти к описанной выше проблеме. Спасибо.

Answer 1

Попробуйте использовать саман скобки это действительно пригодится в то время как нарезка СДП. Он имеет множество прохладную особенность и она предоставит вам CSS подсказки, так что вы можете достичь того же результата, что и .psd

Download brackets from here

Answer 2

Примените этот CSS к тексту:

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