Dodaj solidną białą obwódkę w górę iw lewo, aby uzyskać efekt 3D

Question

Próbuję naśladować efekt, jak pokazano tutaj:

Granica na górze i po lewej stronie okna jest nadanie jej ładny efekt wytłoczenia. Próbowałem tego samego z następującymi:

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

Ale nie jest nawet blisko. Myślę, że ma to związek z lepszą parą wartości granicznych i box-shadow, których nie mogę zignorować. Jakaś pomoc?

Oto na wszelki wypadek: fiddle.

Answer 1

Używasz opacity: 0.3; tutaj co wpływa na cały element, jak również jego dzieci. Prawidłowym podejściem byłoby użycie koloru tła rgba() wraz z rgba() dla koloru obramowania. Również usunięcie granice prawej i uzyskuje się żądany efekt (przynajmniej bliskim przybliżeniem)

#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

Nie należy czynić całego elementu półprzezroczystym (, ponieważ wpłynie to na wszystkie elementy potomne). Użyj alfa w kolorze tła.

Można również ustawić półprzezroczyste brzegi (bez użycia cienia).

#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*/; 
} 

---

Pełny przykład

* { 
 
    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 3

Można to zrobić za pomocą box-shadow i wyjąć border i opacity i dodać background jak rgba()

*{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
html{ 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
body{ 
 
\t background-color:#3E4C79; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
#nl-login{ 
 
\t width:400px; 
 
\t height:250px; 
 
\t background-color: rgba(240, 240, 240, 0.3); 
 
     box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset; 
 
\t margin:40px auto; \t 
 
}

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

Answer 4

Można to zrobić tylko granice, wystarczy użyć rgba z kochankiem krycie granicy lewy i dolny.

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>

Answer 5

I jak użycie dwóch oddzielonych przecinkami 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); 

jak w this fiddle .

Sensowne jest używanie cieni podczas tworzenia efektów świetlnych. Dodatkowo ta technika umożliwia rozmycie/rozprzestrzenianie i pozostawia atrybuty obramowania i konturu, jeśli chcesz użyć ich do innych efektów.