CodePen

HTML

            
              

   <form>
  <h1>LOG IN</h1>
  <div class="inset">
   
  <p>
    <label for="email">EMAIL ADDRESS</label>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <label for="password">PASS</label>
    <input type="password" name="password" id="password">
  </p>
  <p>
    <input type="checkbox" name="remember" id="remember">
    <label for="remember">Will we see you again?</label>
  </p>
  </div>
  <p class="p-container">
    <span>Forgot password ?</span>
    <input type="submit" name="go" id="go" value="Log in">
  </p>
</form>
            
          
!

CSS

            
              * { box-sizing: border-box; }

body{
  background:url(http://i.imgur.com/q6aQq.jpg);
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  color:white;
  font-size:12px;
}

form {
 background-color: rgba(200, 200, 200, 0.1);
  border-radius:8px;
  box-shadow: 
    0 0 200px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(20, 20, 20, 0.6),
    inset 1140px 1140px 6px -1400px rgba(255, 255, 255, 0.1),
    inset 0 0 40px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  width:300px;
  margin:15% auto;
  border:1px solid rgba(1,1,1, 0.5);
  overflow:hidden;
  position:relative;
}


form:before {
   content:"";
  display:block;
  position:absolute;
  width:8px;
  height:5px;
  border-radius:50%;
  left:100%;
  top:20px;
  box-shadow: 0 0 6px 4px rgba(255,255,255, 0.4);
}

.inset {
   padding-left:20px; 
  padding-right:20px;
}

form h1 {
  font-size:30px;
  background-color: rgba( 0,0,0, 0.5);
  color: rgba(155,155,155, 0.3);
  text-align:center;
  padding:15px 0;
  position:relative;
  box-shadow:
    inset 80px 0 80px rgba(1,1,1, 0.2),
    inset -80px 0 80px rgba(1,1,1, 0.2),
    inset 0 -5px 10px rgba(1,1,1, 0.2),
    inset 0 -2px 4px rgba(200,200,200, 0.2),
    inset 0 10px 30px rgba(0,0,0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    0 -3px 10px rgba( 250, 250, 250, 0.4),
    0 1px 0 rgba(1,1,1, 0.2);
}

form h1:after {
 	content:"";
  display:block;
  width:250px;
  height:100px;
  position:absolute;
  top:0;
  left:50px;  
}

label {
 	color:#666;
  display:block;
  padding-bottom:9px;
}

input[type=text],
input[type=password] {
 	width:100%;
  padding:8px 5px;
  background:linear-gradient(#1f2124, #27292c);
  border:1px solid #222;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4);
  border-radius:0.3em;
  margin-bottom:20px;
}

label[for=remember]{
 	color: #666;
  display:inline-block;
  padding-bottom:0;
  padding-top:5px;
}

input[type=checkbox] {
 	display:inline-block;
}

.p-container {
 	padding:0 20px 20px 20px; 
}

.p-container:after {
 	clear:both;
  display:table;
  content:"";
}

.p-container span {
  display:block;
  float:left;
  color:#222;
  padding-top:10px;
}

input[type=submit] {
 	padding:5px 30px;
  border:1px solid rgba(0,0,0,0.2);
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 10px 10px rgba(255,255,255,0.1);
  border-radius:0.3em;
  background: rgba(1,1,1, 0.2);
  color:white;
  float:right;
  font-weight:bold;
  cursor:pointer;
  font-size:13px;
}

input[type=submit]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 10px rgba(255,255,255,0.1);
}

input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
 	background: rgba(2,2,2, 0.1);
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................