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

Question

I am trying to reproduce the effect as shown below:

The border at the top and left of the window gives a good embossing 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 he is not even close to him. I think this is due to the fact that I have the best pair of borders and shadow values ​​in the box, which I cannot seem to be zero. Any help?

In this case, the violin .

Answer 1

You use opacity: 0.3; here, which affects the entire element, as well as its children. The correct approach is to use the background color rgba() , as well as rgba() for the border color. Also, the removal of the right and lower boundaries gives 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/

Answer 2

I like to use two comma box-shadow separated box-shadow s:

 box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.4), inset 1px 1px 1px 0px rgba(255, 255, 255, 0.4); 

Like in this fiddle .

It makes sense for me to use shadows as we create lighting effects. Plus, this technique allows blurring / spreading and leaves border and path attributes available if you want to use them for other effects.

Answer 3

Do not make the entire element translucent (as this will affect all descendant elements). Use alpha on the background color.

And you can also make borders translucent (without using a shadow).

 #nl-login{ width:400px; height:250px; background-color:rgba(240,240,240,0.3); margin:40px auto; border:1px solid; border-color:rgba(240,240,240,0.5) /*top border*/ rgba(0,0,0,0.5) /*right border*/ rgba(0,0,0,0.5) /*bottom border*/ rgba(240,240,240,0.5) /*left border*/; } 

---

Full example

 * { 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: rgba(240, 240, 240, 0.3); margin: 40px auto; border: 1px solid; border-color: rgba(240, 240, 240, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(240, 240, 240, 0.5); } 

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

Answer 4

You can do this with box-shadow and remove border and opacity and add background as rgba()

 *{ 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: rgba(240, 240, 240, 0.3); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset; margin:40px auto; } 

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

Answer 5

You can only do this with borders, just use rgba with the opacity of the lover for the left and bottom borders.

 body { background-color: #3E4C79; margin: 0; } #nl-login { width: 400px; height: 50px; background-color: #737D9C; margin: 40px auto; border-top: 1px solid rgba(255, 255, 255, 0.8); border-left: 1px solid rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(62, 76, 121, 0.5); } 

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