<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');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js