Build a Quick and Elegant Login Form

Build a Quick and Elegant Login Form

on Apr 16th 2012 with 31 comments
Tutorial Details
  • Topic: CSS3, HTML5
  • Difficulty: Intermediate
  • Estimated completion time: 30 mins

Final Product What You'll Be Creating

Download Source Files
Demo View It Online
This entry is part 8 of 11 in the Bringing Premium Pixels to Life Session
« PreviousNext »

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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a web and user interface designer who likes minimalism. I run a freelancing web design business called Iqonic Design, and you can find my work there, as well as connect with me on Twitter, Dribbble, Forrst, and Zerply.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Nate

    Your checkbox should have an attribute id=’checkbox’ for the label to work properly. Nice looking form

  • http://www.poradnik-pozycjonowania-stron.pl Przemek

    Really nice, thanks :)

  • http://antoinedescamps.fr Antoine Descamps

    I don’t like that each input and its corresponding label aren’t grouped together with a div or a p. It’s way more flexible imo.

  • Soninke

    Missing id:

    Keep me logged in

  • Adam

    Yet again, a Webtuts tutorial that serves basic and easily avoided a11y errors for the copy/paste brigade to perpetuate. In addition to the already-highlighted absence of an ID for the checkbox, there are two others that are glaring and serious: an insanely low contrast ratio of just 2.3:1 (on 11px text as well!) and an important link inside a paragraph inside a form. Non-form elements inside forms are ignored by some aural and Braille ATs when in form mode. Come on, guys. Newbies learn from sites like this, but here they risk picking up bad practices.

    • http://www.iqonicdesign.com Ari

      This goal of this tutorial is to show how to bring a PSD to life using CSS instead of images. The contrast is very similar to the image it was coded from. Yes, there are some small errors which can be easily corrected, and thank you for pointing them out.

    • elkaz

      If you’re going as far as to point out something as “glaring” as contrast ratios of text, then you should probably point out the even more obvious accessibility fault which is that of a missing fieldset and associated legend.

      • Adam

        This form would not need, nor benefit from, a fieldset. It is, in fact, counter-productive for AT users in any form that contains only one relationship grouping. In such a context, the key drawback of a fieldset remains but its use is completely redundant, so it becomes merely a nuisance rather than a help.

        • elkaz

          I disagree. What’s to inform the user that this is a login form?

          • Adam

            You are kidding, I assume. If any user, including AT users, fail to understand the purpose of a form until they reach a fieldset within it, then you really have failed to carry out your job properly. If you are proposing the addition of a fieldset to identify the purpose of a form, you have not only failed to do your job, but you have failed to understand the purpose of the fieldset element.

            I repeat: if a form has one relationship grouping or no relationship grouping, it should NOT have a fieldset, and in addition to that principle, to add one in such circumstances is to introduce the key drawback of fieldsets for AT users without any benefit whatsoever.

          • elkaz

            While I agree that a fieldset is not the best method of informing a user of the context of the form and in this case shouldn’t be used as there is no need to separate form groups, it is still in fact one method. One more than this form already has. Perhaps there should be a heading tag above the form to notify the user that this is a login form.

  • Logan

    Does height need to be specified, for the transitions to work, or something? It makes the form very inflexible for something that needs more than just the 2 fields, for instance a “Register” form, with password/password-confirm form fields.

  • http://irie-design.fr dready

    Wow! Nice! Those animations are quite difficult to start with but who does it stop :D

  • http://www.kieru.com Rob

    The color of the Login button feels desaturated and that makes me feel like it is disabled. May just be a personal quirk but I’d want it a shade darker and on hover probably even a more saturated color rather than a light highlight popping in.

  • Sebastian

    is Helvetica Neue a system font ???

    • Khalid

      On Mac OS X? Yes! On Windows? No.

      • Philipp

        Realy Nice =D

  • Pingback: Build a Quick and Elegant Login Form Using CSS3 and HTML5 –

  • http://blogverize.blogspot.com Nimsrules

    Sleek and minimal yet quite appealing. Fabulous tutorial.

  • http://www.lotusmarketing.ca Marketing Sherbrooke

    Looking great, simple and clean. It reminds me the style of box, skype and vimeo.
    I would have made the font a little bigger, but that’s just me.

  • http://www.yastech.ca Michael Yasieniuk

    Great to see a free PSD file along with the HTML to implement it. Thanks!

  • arif

    Thanks , i got it. i have got some new issues , pls help me to understand when you are free.
    1. position property can be used to set the position of an element, so why float is important to learn ? is it true that using position property is a bad practice when we have chance to use float property ?
    2. suppose there are two class named “something” and “nothing”,
    wht is difference between .something+.nothing{property:value;} and .something, .nothing {property:value;}?
    as far as i know this .something, .nothing {property:value;} is called Grouping Selectors.
    3. display:inline-block; what does it mean ?

  • Pingback: Weekly Web Developers Kit – vol. 6 (4-20-2012) « CSS Tips

  • Rasmus Willemoes

    What about the most important part?

    Making it work, and actually logging you in???

  • Nikkel

    Biggest drawback, in the demo, the tabulation does not work for passing from username field to password field.

  • Pingback: Tweet-Parade (no.16 April 2012) | gonzoblog.nl

  • Tom

    Might have been nice to make the “Keep me logged in” text a label for it’s input.

  • http://www.tritonseo.com/ Oli

    Once again a great tutorial, though I think you should add some hover effects to the submit button (like a box shadow and maybe a darker gradient). And it didn’t even know about those css animations so thanks for that!

  • http://www.esylhet.com sylhet

    Is it work on IE smoothly ?

  • old Fock

    1) This doesn’t work for IE6, IE7, Firefox and Opéra. (but it’s very nice on Chrome and newer versions of Firefox, and IE9).

    2) The demo have been updated but the archive.zip file is an old version, full of mistakes, with DOM elements missing and not closed. The best is to save the website from the File entry of the browser.

    3) This doesn’t work with IE7 so it’s a show-stopper.

  • Pingback: 70 Fresh jQuery and CSS3 Tutorials From 2012

  • Pingback: 50 Useful and Instructive CSS3 Tutorials You Always Wanted To Complete From 2012 | Indoor Digital Billboards

  • Pingback: 50 Useful and Instructive CSS3 Tutorials You Always Wanted To Complete From 2012 | Developer Junk

  • Pingback: 50 Useful and Instructive CSS3 Tutorials You Always Wanted To Complete From 2012 « Resource Sharing ::: . . . . .

  • Pingback: 50 Useful and Instructive CSS3 Tutorials You Always Wanted To Complete From 2012 | Scattered Monkey

  • http://www.ucmedia.ir Mona

    Thanks for sharing this great article! I feel strongly about it and love learning more on this topic. It is extremely helpful for me.

  • Pingback: Modern CSS3 Tutorials For Professional Developers and Designers | CSS Tips

  • Pingback: 30 Best CSS3 Tutorials From 2012

  • Pingback: Trucs, astuces et techniques CSS3 2012 | WEB 2 KECH Blog

  • Mohit Patel

    I have already gotten the design. Is there a tutorial to use the html design to actually do the login stuff. Like have the user submit the Username/Password and the code go look it up if it is correct, then allow the user to access the website?

  • Pingback: Useful CSS3 Tutorials - Web Geeks Hub

  • Pingback: 22 Beautiful CSS/HTML Login Form Templates

  • Christian Reyes

    Thanks a lot for sharing this info
    Very useful for me
    Regards

  • http://twitter.com/volll_horszt vhbxjkyv

    awsome, thanks for sharing that!!!

  • Pingback: 22个漂亮的 CSS/HTML 登录表单模板 | 除却巫山不是你

  • Pingback: 役立つこと間違いなし！フォーム用フリーテンプレート50+ | yugurido

  • Pingback: Tổng hợp một số giao diện login form đẹp | Share and learning…