Last active
August 29, 2015 14:18
-
-
Save ben-z/02ac210d73b6e90ba6a1 to your computer and use it in GitHub Desktop.
Simple Log In Form with css. Preview on Codepen: http://codepen.io/anon/pen/azrmoB
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <meta name="author" content="http://github.com/ben-z/"> | |
| <meta name="license" content="ISC"> | |
| <title>Log In</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <form class="login"> | |
| <i class="user-icon"></i><input type="text" placeholder="Username" /> | |
| <br /> | |
| <i class="key-icon"></i><input type="password" placeholder="Password" /> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
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
| // Mixins are like functions, | |
| // they are used throughout the code | |
| @mixin placeholder-color($color) { | |
| &::-webkit-input-placeholder { | |
| @include font-attr($color); | |
| } | |
| &:-moz-placeholder { /* Firefox 18- */ | |
| @include font-attr($color); | |
| } | |
| &::-moz-placeholder { /* Firefox 19+ */ | |
| @include font-attr($color); | |
| } | |
| &:-ms-input-placeholder { | |
| @include font-attr($color); | |
| } | |
| } | |
| @mixin font-attr($color){ | |
| color: $color; | |
| font-family: HelveticaNeue; | |
| font-size: 15px; | |
| line-height: 34px; | |
| vertical-align: bottom; | |
| } | |
| @mixin icon($url){ | |
| display: inline-block; | |
| content: url($url); | |
| height: 34px; | |
| width: 34px; | |
| vertical-align: text-top; | |
| } | |
| // ----------------------------- | |
| body { | |
| background-color: black; | |
| } | |
| input{ | |
| letter-spacing: 1px; | |
| } | |
| #content{ | |
| text-align: center; | |
| } | |
| form.login { | |
| // Optional: Just to make the form | |
| // look nicer on the empty webpage | |
| display: inline-block; | |
| margin-top: 50px; | |
| text-align: left; | |
| border: 1px solid white; | |
| padding: 5px 30px 30px 30px; | |
| // ----------------------------- | |
| // Custom icons I traced | |
| .user-icon { | |
| @include icon('assets/user.svg'); | |
| } | |
| .key-icon { | |
| @include icon('assets/key.svg'); | |
| } | |
| // ----------------------------- | |
| input{ | |
| display:inline-block; | |
| background: none; | |
| border: none; | |
| border-bottom: 1px solid white; | |
| margin: 25px 0 0 7px; | |
| padding: 0 0 0 5px; | |
| @include font-attr(white); | |
| // here you can change the placeholder color | |
| // try changing 'white' to 'darken(white, 20%)' | |
| @include placeholder-color(white); | |
| &:focus{ | |
| outline-width: 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment