asprin asprin - 22 days ago 6
CSS Question

Add a solid white border at top and left to get 3d effect

I'm trying to mimic the effect as shown here:

Login

The border at the top and left of the box is giving it a nice embossed effect. I tried the same with the following:

<!-- HTML -->
<div id="nl-login">
</div>

<!-- CSS -->
*{
margin:0;
padding:0;
}
html{
width:100%;
height:100%;
}
body{
background-color:#3E4C79;
width:100%;
height:100%;
}
#nl-login{
width:400px;
height:250px;
background-color:#f0f0f0;
margin:40px auto;
opacity:0.3;
box-shadow:-1px -1px 2px #fff;
border:1px solid #fff;
}


But it's not even close to it. I think it has got to do with having a better pair of border and box-shadow values which I can't seem to zero in on. Any help?

Here is a fiddle just in case.

Answer

You're using opacity: 0.3; here which affects the entire element as well as its children. The correct approach would be to use an rgba() background color, along with rgba() for the border color. Also removing the right and bottom borders produces the desired result (at least a close approximation)

#nl-login{
    width:400px;
    height:250px;
    background-color:rgba(255, 255, 255, .3);
    margin:40px auto;   
    /*box-shadow:-1px -1px 2px #fff;*/
    border:1px solid rgba(255, 255, 255, .7);
  border-right-width: 0;
  border-bottom-width: 0;
}

https://jsfiddle.net/Kyle_Sevenoaks/3mjeLo00/1/