Dark Login Form

FEATURING THIRD LEVEL CSS THREE FEATURES

by erick

HTML

<form>
    <div>
        <label for="username">Username</label>
        <input type="text" placeholder="User name">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" placeholder="Password">
    </div>
    <div class="buttons">
        <input type="submit" value="Log in">
    </div>
<form>

CSS

body {
   background: #222;
}
form { width: 200px; margin: 100px auto; position: relative; }
form div { margin: 10px 0; position: relative; } 

input[type="text"], input[type="password"] {
     -webkit-border-radius: 7px;
     -moz-border-radius:    7px;
     border-radius:         7px;
     border: 0;
     outline: 0;
     font: 15px Georgia, Serif; 
     color: white;
     padding: 8px;
     width: 184px;
     background: #2c2c2b;
     -webkit-box-shadow: 
        inset 0 -1px 0 #666,
        inset 3px 3px 5px #111;
     -moz-box-shadow: 
        inset 0 -1px 0 #666,
        inset 3px 3px 5px #111;
     box-shadow: 
        inset 0 -1px 0 #666,
        inset 3px 3px 5px #111;
}
form:after {
    content: "";
    width: 300px;
    height: 300px;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -200px;
    position: absolute;
    z-index: -1;
    background-image: -webkit-radial-gradient(center, circle contain, rgba(255,255,255,0.2), transparent);
    background-image: -moz-radial-gradient(center, circle contain, rgba(255,255,255,0.2), transparent);
    background-image: -ms-radial-gradient(center, circle contain, rgba(255,255,255,0.2), transparent);
    background-image: -o-radial-gradient(center, circle contain, rgba(255,255,255,0.2), transparent);
}

::-webkit-input-placeholder {
   color: #666;
}

:-moz-placeholder {
   color: #666;
}

label {
     position: absolute;
     top: -9999px;
     left: -9999px; 
}

.buttons {
     text-align: right;   
}

input[type="submit"] {
   border: 0;
   border-top: 1px solid #c9c9c9;
   background: #333333;
   background: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#333333));
   background: -moz-linear-gradient(top, #787878, #333333);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow:...

JavaScript

WebRep
Overall rating
This site has no rating
(not enough votes)