skip to Main Content

Our designer prefers to provide web designs in .psd (Photoshop). When we get to create a page markup and styles, we usually have to compromise the design in favour of tools available to us. Surely the later depend on the skill of the person who implements the page, but given the following example, what is the general approach to research and arrive at the correct CSS technique to implement the design?

The example in question is the following:
In Photoshop, a text-based login button looks like this as the final result:

enter image description here

This is basically a [T] (text) element with the effect (Fx) applied to it. The effect is color overlay that appears to be set like this:

enter image description here

Without this effect, the login page in PSD looks like this:

enter image description here

Which is exactly how it looks in our page on the browser. If we are to get it to look exactly the same as in final .psd design, how we are to approach looking for the correct css-technique example?

We implemented the login link as <button> element with a given .css class. I’ve tried going with backgound-blend-mode: normal like this:

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

but it gives the following look in Chrome:

enter image description here

I realize that the problem is probably related to the fact that we are using web font technique and it’s not affected by the styling in browser, the same way text is affected in photoshop, but I’d appreciate a hint on how to approach the above-described problem. Thank you.

2

Answers


  1. Apply this css to the text:

    Text-shadow: 0px 1px 2px rgba(255,255,255,0.2);
    
    Login or Signup to reply.
  2. Try using adobe brackets it really comes in handy while slicing a psd. It has lots of cool feature and it would provide you with CSS hints so that you can achieve the same result as the .psd

    Download brackets from here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search