Advertisement
HTML/CSS

Build a Quick and Elegant Login Form

by

Today we're going to code up Orman Clark's Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden's CSS animations to embellish the experience.

This tutorial assumes a certain understanding of HTML/CSS from you; we're going to be moving pretty fast. OK, let's go!


Step 1: The HTML Markup

We start out by linking to our stylesheets within the head of our document. We have a reset stylesheet to bring everything back to zero, Dan Eden's animate.css which we'll use for some fun animation later on, and our own styles.css where we'll carry our most of our work.

<!doctype html>

<head>

	<!-- Basics -->
	
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Login</title>

	<!-- CSS -->
	
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/styles.css">
	
</head>

The meat of the HTML comprises a container, a form and some inputs.

<!-- Main HTML -->
	
<body>
	
	<!-- Begin Page Content -->
	
	<div id="container">
		
		<form>
		
			<label for="username">Username:</label>
			
			<input type="text" id="username" name="username">
			
			<label for="password">Password:</label>
			
			<p><a href="#">Forgot your password?</a></p>
			
			<input type="password" id="password" name="password">
			
			<div id="lower">
			
				<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
				
				<input type="submit" value="Login">
			
			</div><!--/ lower-->
		
		</form>
		
	</div><!--/ container-->
	
	
	<!-- End Page Content -->
	
</body>

</html>

Step 3: Positioning the Elements

Now that we've written our HTML markup, we can move on to the css. We'll first specify the basics, positioning our container element in the center of the page.


/* Basics */

html, body {
	width: 100%;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #f0f0f0;
	
}

#container {
	position: fixed;
	width: 340px;
	height: 280px;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -170px;
}

Now we'll add some structural style to the inputs and other elements:


form {
	margin: 0 auto;
	margin-top: 20px;
}

label {
	color: #555;
	display: inline-block;
	margin-left: 18px;
	padding-top: 10px;
	font-size: 14px;
}

p a {
	font-size: 11px;
	color: #aaa;
	float: right;
	margin-top: -13px;
	margin-right: 20px;
}

p a:hover {
	color: #555;
}

input {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	outline: none;
}

input[type=text],
input[type=password] {
	color: #777;
	padding-left: 10px;
	margin: 10px;
	margin-top: 12px;
	margin-left: 18px;
	width: 290px;
	height: 35px;
}

#lower {
	background: #ecf2f5;
	width: 100%;
	height: 69px;
	margin-top: 20px;
}

input[type=checkbox] {
	margin-left: 20px;
	margin-top: 30px;
}

.check {
	margin-left: 3px;
}

input[type=submit] {
	float: right;
	margin-right: 20px;
	margin-top: 20px;
	width: 80px;
	height: 30px;
}


Step 4: Styling the Elements

The elements are positioned perfectly. Now it's time to make them look beautiful! First, we'll style the container by giving it subtly rounded corners and a box shadow for depth.


#container {
	position: fixed;
	width: 340px;
	height: 280px;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -170px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

Then the inputs get similar treatment, with some border radius and box shadows. We'll give the submit button a gradient background, with a solid background-color to cater for IE9 and earlier. Notice we're targeting each input type individually with css attribute selectors.


form {
	margin: 0 auto;
	margin-top: 20px;
}

label {
	color: #555;
	display: inline-block;
	margin-left: 18px;
	padding-top: 10px;
	font-size: 14px;
}

p a {
	font-size: 11px;
	color: #aaa;
	float: right;
	margin-top: -13px;
	margin-right: 20px;
}

p a:hover {
	color: #555;
}

input {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	outline: none;
}

input[type=text],
input[type=password] {
	color: #777;
	padding-left: 10px;
	margin: 10px;
	margin-top: 12px;
	margin-left: 18px;
	width: 290px;
	height: 35px;
	border: 1px solid #c7d0d2;
	border-radius: 2px;
	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
}

#lower {
	background: #ecf2f5;
	width: 100%;
	height: 69px;
	margin-top: 20px;
	box-shadow: inset 0 1px 1px #fff;
	border-top: 1px solid #ccc;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

input[type=checkbox] {
	margin-left: 20px;
	margin-top: 30px;
}

.check {
	margin-left: 3px;
	font-size: 11px;
	color: #444;
	text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
	float: right;
	margin-right: 20px;
	margin-top: 20px;
	width: 80px;
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #acd6ef; /*IE fallback*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
	background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
	background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
	border-radius: 30px;
	border: 1px solid #66add6;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
	cursor: pointer;
}

Next, to aid user feedback, we could do with some hover and active states:


form {
	margin: 0 auto;
	margin-top: 20px;
}

label {
	color: #555;
	display: inline-block;
	margin-left: 18px;
	padding-top: 10px;
	font-size: 14px;
}

p a {
	font-size: 11px;
	color: #aaa;
	float: right;
	margin-top: -13px;
	margin-right: 20px;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
}

p a:hover {
	color: #555;
}

input {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	outline: none;
}

input[type=text],
input[type=password] {
	color: #777;
	padding-left: 10px;
	margin: 10px;
	margin-top: 12px;
	margin-left: 18px;
	width: 290px;
	height: 35px;
	border: 1px solid #c7d0d2;
	border-radius: 2px;
	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
}

input[type=text]:hover,
input[type=password]:hover {
	border: 1px solid #b6bfc0;
	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

input[type=text]:focus,
input[type=password]:focus {
	border: 1px solid #a8c9e4;
	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

#lower {
	background: #ecf2f5;
	width: 100%;
	height: 69px;
	margin-top: 20px;
	box-shadow: inset 0 1px 1px #fff;
	border-top: 1px solid #ccc;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

input[type=checkbox] {
	margin-left: 20px;
	margin-top: 30px;
}

.check {
	margin-left: 3px;
	font-size: 11px;
	color: #444;
	text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
	float: right;
	margin-right: 20px;
	margin-top: 20px;
	width: 80px;
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #acd6ef; /*IE fallback*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
	background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
	background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
	border-radius: 30px;
	border: 1px solid #66add6;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
	cursor: pointer;
}

input[type=submit]:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
	background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
	background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

input[type=submit]:active {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
	background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
	background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

Step 5: The Finishing Touches

Our login form looks good, but let's push the boat out and add to the experience. We're now going to add some CSS animations and transitions to polish it off. We've already referenced Dan Eden's animate.css in our head - we can now make use of his predefined animation types, such as bounceIn, along with the appropriate browser prefixes.

First, the container animation:

#container {
	position: fixed;
	width: 340px;
	height: 280px;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -170px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
	-webkit-animation-name: bounceIn;
	-webkit-animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: bounceIn;
	-moz-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	animation-name: bounceIn;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

Next, transitions for the interactive elements:


p a {
	font-size: 11px;
	color: #aaa;
	float: right;
	margin-top: -13px;
	margin-right: 20px;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
}

input[type=text],
input[type=password] {
	color: #777;
	padding-left: 10px;
	margin: 10px;
	margin-top: 12px;
	margin-left: 18px;
	width: 290px;
	height: 35px;
	border: 1px solid #c7d0d2;
	border-radius: 2px;
	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	transition: all .4s ease;
}


Step 6: Final Code

We're done! Below you'll find the final code for our Elegant Login Form, which should give you something looking very similar to this:

HTML:

   	<!doctype html>
   	
   	<head>
   	
   		<!-- Basics -->
   		
   		<meta charset="utf-8">
   		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   		
   		<title>Login</title>
   	
   		<!-- CSS -->
   		
   		<link rel="stylesheet" href="css/reset.css">
   		<link rel="stylesheet" href="css/animate.css">
   		<link rel="stylesheet" href="css/styles.css">
   		
   	</head>
   	
   		<!-- Main HTML -->
   		
   	<body>
   		
   		<!-- Begin Page Content -->
   		
		<div id="container">
			
			<form>
			
				<label for="username">Username:</label>
				
				<input type="text" id="username" name="username">
				
				<label for="password">Password:</label>
				
				<p><a href="#">Forgot your password?</a></p>
				
				<input type="password" id="password" name="password">
				
				<div id="lower">
				
					<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
					
					<input type="submit" value="Login">
				
				</div><!--/ lower-->
			
			</form>
			
		</div><!--/ container-->

   		
   		
   		<!-- End Page Content -->
   		
   	</body>
   	
   	</html>

CSS:

   
   /* Basics */
   
   html, body {
   	width: 100%;
   	height: 100%;
   	font-family: "Helvetica Neue", Helvetica, sans-serif;
   	color: #444;
   	-webkit-font-smoothing: antialiased;
   	background: #f0f0f0;
   	
   }
   
   #container {
   	position: fixed;
   	width: 340px;
   	height: 280px;
   	top: 50%;
   	left: 50%;
   	margin-top: -140px;
   	margin-left: -170px;
   	background: #fff;
   	border-radius: 3px;
   	border: 1px solid #ccc;
   	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
   	-webkit-animation-name: bounceIn;
   	-webkit-animation-fill-mode: both;
   	-webkit-animation-duration: 1s;
   	-webkit-animation-iteration-count: 1;
   	-webkit-animation-timing-function: linear;
   	-moz-animation-name: bounceIn;
   	-moz-animation-fill-mode: both;
   	-moz-animation-duration: 1s;
   	-moz-animation-iteration-count: 1;
   	-moz-animation-timing-function: linear;
   	animation-name: bounceIn;
   	animation-fill-mode: both;
   	animation-duration: 1s;
   	animation-iteration-count: 1;
   	animation-timing-function: linear;
   }
   
   form {
   	margin: 0 auto;
   	margin-top: 20px;
   }
   
   label {
   	color: #555;
   	display: inline-block;
   	margin-left: 18px;
   	padding-top: 10px;
   	font-size: 14px;
   }
   
   p a {
   	font-size: 11px;
   	color: #aaa;
   	float: right;
   	margin-top: -13px;
   	margin-right: 20px;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	transition: all .4s ease;
   }
   
   p a:hover {
   	color: #555;
   }
   
   input {
   	font-family: "Helvetica Neue", Helvetica, sans-serif;
   	font-size: 12px;
   	outline: none;
   }
   
   input[type=text],
   input[type=password] {
   	color: #777;
   	padding-left: 10px;
   	margin: 10px;
   	margin-top: 12px;
   	margin-left: 18px;
   	width: 290px;
   	height: 35px;
   	border: 1px solid #c7d0d2;
   	border-radius: 2px;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
   	-webkit-transition: all .4s ease;
   	-moz-transition: all .4s ease;
   	transition: all .4s ease;
   }
   
   input[type=text]:hover,
   input[type=password]:hover {
   	border: 1px solid #b6bfc0;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
   }
   
   input[type=text]:focus,
   input[type=password]:focus {
   	border: 1px solid #a8c9e4;
   	box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
   }
   
   #lower {
   	background: #ecf2f5;
   	width: 100%;
   	height: 69px;
   	margin-top: 20px;
   	box-shadow: inset 0 1px 1px #fff;
   	border-top: 1px solid #ccc;
   	border-bottom-right-radius: 3px;
   	border-bottom-left-radius: 3px;
   }
   
   input[type=checkbox] {
   	margin-left: 20px;
   	margin-top: 30px;
   }
   
   .check {
   	margin-left: 3px;
   	font-size: 11px;
   	color: #444;
   	text-shadow: 0 1px 0 #fff;
   }
   
   input[type=submit] {
   	float: right;
   	margin-right: 20px;
   	margin-top: 20px;
   	width: 80px;
   	height: 30px;
   	font-size: 14px;
   	font-weight: bold;
   	color: #fff;
	background-color: #acd6ef; /*IE fallback*/
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
   	background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
   	background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
   	border-radius: 30px;
   	border: 1px solid #66add6;
   	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
   	cursor: pointer;
   }
   
   input[type=submit]:hover {
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
   	background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
   	background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
   }
   
   input[type=submit]:active {
   	background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
   	background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
   	background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
   }

Conclusion

I hope you enjoyed following along as we created something that not only looks good, but functions beautifully and has that little extra 'something'. Thanks for reading!

Related Posts
  • Web Design
    HTML & CSS
    Easier Visual Data in the Browser With Variance ChartsVariance thumb
    Today, we will be diving into Variance Charts; a unique JavaScript based "grammer of graphics" which provides an abstract, declarative markup style to create what would otherwise be fairly complex charts. Read More…
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin - Adding StylingCustomize wordpress admin rachel 400
    In the first five parts of this series, I showed you how to customize the WordPress admin in a variety of ways, including customizing the login screen, dashboard and post editing screen. In this tutorial you'll learn how to add some styling and branding to your admin screens. Specifically you'll learn how to: customize the admin screen footer and style it style admin menus style links and buttons Read More…
  • Web Design
    HTML/CSS
    Quickly Build a Swish Teaser Page With CSS3Preview
    In this tutorial, you'll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that's getting ready to launch.Read More…