Create a gist now

Instantly share code, notes, and snippets.

Simple Log In Form with css. Preview on Codepen: http://codepen.io/anon/pen/azrmoB
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
// 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;
}
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment