Last active
January 3, 2016 20:59
-
-
Save centurianii/8518400 to your computer and use it in GitHub Desktop.
The firsLogin form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Login form | |
*/ | |
html, body { | |
height: 100%; | |
} | |
body { | |
background-color: #D9DEE2; | |
background-image: -moz-linear-gradient(center top , #EBEEF2, #D9DEE2); | |
font: 12px 'Lucida Sans Unicode','Trebuchet MS',Arial,Helvetica; | |
margin: 0; | |
} | |
#login { | |
background-color: #FFFFFF; | |
background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE); | |
border-radius: 3px; | |
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #FFFFFF, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #FFFFFF, 0 7px 0 rgba(0, 0, 0, 0.2); | |
height: 240px; | |
left: 50%; | |
margin: -150px 0 0 -230px; | |
padding: 30px; | |
position: absolute; | |
top: 50%; | |
width: 400px; | |
z-index: 0; | |
} | |
#login:before { | |
border: 1px dashed #CCCCCC; | |
bottom: 5px; | |
box-shadow: 0 0 0 1px #FFFFFF; | |
content: ""; | |
left: 5px; | |
position: absolute; | |
right: 5px; | |
top: 5px; | |
z-index: -1; | |
} | |
h1 { | |
color: #666666; | |
font: 26px/1 Verdana,Helvetica; | |
letter-spacing: 4px; | |
margin: 0 0 30px; | |
position: relative; | |
text-align: center; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 1x 1px 0 rgba(0, 0, 0, 0.5); | |
text-transform: uppercase; | |
} | |
h1:after, h1:before { | |
background-color: #777777; | |
content: ""; | |
height: 1px; | |
position: absolute; | |
top: 15px; | |
width: 120px; | |
} | |
h1:after { | |
background-image: -moz-linear-gradient(left center , #777777, #FFFFFF); | |
right: 0; | |
} | |
h1:before { | |
background-image: -moz-linear-gradient(right center , #777777, #FFFFFF); | |
left: 0; | |
} | |
fieldset { | |
border: 0 none; | |
margin: 0; | |
padding: 0; | |
} | |
#inputs input { | |
background: url("http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png") no-repeat scroll 0 0 #F1F1F1; | |
border: 1px solid #CCCCCC; | |
border-radius: 5px; | |
box-shadow: 0 1px 1px #CCCCCC inset, 0 1px 0 #FFFFFF; | |
margin: 0 0 10px; | |
padding: 15px 15px 15px 30px; | |
width: 353px; | |
} | |
#username { | |
background-position: 5px -2px !important; | |
} | |
#password { | |
background-position: 5px -52px !important; | |
} | |
#inputs input:focus { | |
background-color: #FFFFFF; | |
border-color: #E8C291; | |
box-shadow: 0 0 0 1px #E8C291 inset; | |
outline: medium none; | |
} | |
#actions { | |
margin: 25px 0 0; | |
} | |
#submit { | |
background-color: #FFB94B; | |
background-image: -moz-linear-gradient(center top , #FDDB6F, #FFB94B); | |
border-color: #D69E31 #E3A037 #D5982D; | |
border-radius: 3px; | |
border-style: solid; | |
border-width: 1px; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; | |
color: #8F5A0A; | |
cursor: pointer; | |
float: left; | |
font: bold 15px Arial,Helvetica; | |
height: 35px; | |
padding: 0; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); | |
width: 120px; | |
} | |
#submit:hover, #submit:focus { | |
background-color: #FDDB6F; | |
background-image: -moz-linear-gradient(center top , #FFB94B, #FDDB6F); | |
} | |
#submit:active { | |
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; | |
outline: medium none; | |
} | |
#submit::-moz-focus-inner { | |
border: medium none; | |
} | |
#actions a { | |
color: #3151A2; | |
float: right; | |
line-height: 35px; | |
margin-left: 10px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form id="login"> | |
<h1>Log In</h1> | |
<fieldset id="inputs"> | |
<input type="text" required="" autofocus="" placeholder="Username" id="username"> | |
<input type="password" required="" placeholder="Password" id="password"> | |
</fieldset> | |
<fieldset id="actions"> | |
<input type="submit" value="Log in" id="submit"> | |
<a href="">Forgot your password?</a><a href="">Register</a> | |
</fieldset> | |
<a href="http://www.red-team-design.com/slick-login-form-with-html5-css3">/www.red-team-design.com</a> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment