<div class="login">
<div class="photo"></div>
<p class="name hidden" id="name">Hans Engebretsen</p>
<div class="username-wrap"><input type="username" class="username" placeholder="Type name & hit enter" id="username-input" /></div>
<div class="pw-box">
<span class="flap">
<div class="inner"></div>
<div class="spine"></div>
<div class="outer"></div>
</span>
<span class="shadow"></span>
<input type="password" class="password" placeholder="Password" />
</div>
</div>
<!--Inspiration taken from both Steven Shobert: https://codepen.io/stevenschobert/pen/kpcBK
and of course Bennet Feely: https://codepen.io/bennettfeely/pen/ErFGv-->
@import "compass/css3";
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
.gradient {
@include background(radial-gradient(#8dddff, #0566a9));
background-size: 360px 600px;
background-position: center -90%;
}
.preloader {
animation:none;
transition:none;
}
.login {
display: inline-block;
width: 180px;
height: 300px;
padding: 30px 25px;
margin: -180px -115px;
position: absolute;
top: 50%;
left: 50%;
//
text-align: left;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
border: 1px solid #5c5c5c;
border-radius: 5px;
box-shadow:rgba(0, 0, 0, 0.25) 0 2px 4px 1px, rgba(0, 0, 0, 0.25) 0 2px 55px 3px;
//
@extend .gradient;
&:before {
content: "";
width: 100%;
height:.1em;
position: absolute;
top: 0px;
left: 0;
//
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.16) 70%);
background-size: 100% 150%;
background-position: center center;
}
}
.login .photo {
width: 88px;
height: 88px;
overflow: hidden;
position: relative;
margin: 0 auto;
margin-top:10%;
border-radius: 50%;
//
border: 2px solid rgba(black, 0.7);
box-shadow: 0 -2px 0px 2px rgba(white, 0.15), 0 2px 2px 2px rgba(black, 0.15), 0 -4px 20px 0px rgba(white, 0.4), 0 0px 140px 0px rgba(0, 120, 120, 0.8), 0 -45px 90px 0px rgba(white, 0.3), 0 4px 39px 0px rgba(black, 0.4);
&:before {
content: '';
width: 90px;
height: 90px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18320/profile/profile-512_3.jpg");
background-size: 100%;
position: absolute;
border-radius: 50%;
}
}
.login .name {
width: 100%;
line-height: 1;
//
text-align: center;
font-size: 0.89em;
color: white;
text-shadow: 1px 1px 1px rgba(black, 0.3);
transition:all 300ms ease;
position:absolute;
left:0;
margin-top:34px;
}
input {
box-sizing: border-box;
width: 100%;
margin-top: 15px;
padding: 5px 2px;
font-size: 0.8em;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
@include box-shadow(rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(0, 0, 100, 0.3) 0 1px 0 0);
&:focus {
outline: 0;
border: 1px solid #77a7c0;
@include box-shadow(hsla(206%, 80%, 40%, 0.5) 0 0 3px 1px, hsla(206%, 80%, 40%, 0.5) 0 0 2px 1px inset);
}
&::input-placeholder {
color: rgba(20, 20, 20, 0.5);
}
}
.username-wrap {
position:relative;
}
.username-wrap:after {
content: "\f18e";
display:inline-block;
font-smoothing: antialiased;
font-family: 'FontAwesome';
position:absolute;
right:5px;
top:5px;
color:rgba(#283335,.4);
font-size:1.25em;
}
.username {
margin-bottom: 10px;
margin-top:30px;
transition:all 300ms ease;
display:block;
opacity:1;
}
.hidden {
opacity:0;
transition:all 300ms ease;
visibility:hidden;
}
.inner, .outer, .spine, .shadow {
position: absolute;
width: 100%;
}
.inner:after, .outer:after {
content: '\f023';
top:33%;
left: 42%;
font-size:1em;
line-height:1.7em;
padding:.125em;
width:2em;
height:2em;
border-radius: 50%;
border:1px solid white;
position:absolute;
font-smoothing: antialiased;
font-family: 'FontAwesome';
box-sizing:border-box;
}
.inner:after {
content: "\f09c";
}
.inner {
background-color: #283335;
text-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
height: 100%;
background-image: linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
}
.spine {
top: .25em;
background: rgb(40, 45, 45);
height: .25em;
transform: rotateX(90deg);
transform-origin: center top;
}
.outer {
@extend .gradient;
height:100%;
background-position: center -117%;
transform: translateZ(0.25rem);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pw-box {
height: 80px;
width: 228px;
background: rba(0, 0, 0, 0.9);
position: absolute;
left: 1px;
padding: 10px;
transition: all .55s ease;
box-shadow: inset 0px -60px 70px rgba(black, 0.9);
.pw-active & {
background: rgba(black, 0.2);
box-shadow: inset 0px 5px 10px rgba(black, 0.2);
}
box-sizing: border-box;
perspective: 320;
.flap {
position: absolute;
color: white;
text-align: center;
pointer-events: none;
z-index: 100;
background-color: rgba(red, 0.3);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
transition: all 0.6s cubic-bezier(0.2, 0.7, 0.1, 1.1);
transform-origin: center bottom;
transform-style: preserve-3d;
}
.pw-active & .flap {
transform: rotateX(-110deg);
}
}
View Compiled
$( document ).ready(function() {
var userInput = $('#username-input'),
userWrap = $('.username-wrap'),
user = $('#name');
userInput.keyup(function (event) {
if (event.which == 13) {
var name = $(this).val();
user.text(name);
userInput.addClass('hidden');
userWrap.addClass('hidden');
user.removeClass('hidden');
user.parent().addClass('pw-active');
$('.password').placeholder(name);
$('.password').focus();
return false;
}
});
user.click(function (event) {
user.addClass('hidden');
user.parent().removeClass('pw-active');
userInput.removeClass('hidden');
userWrap.removeClass('hidden');
});
});
This Pen doesn't use any external CSS resources.