Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Build a Quick and Elegant Login Form

by
This post is part of a series called Bringing Premium Pixels to Life.
Powering Orman's Image Slider Controls With Nivo
Quick Tip: Create a Rating System With CSS, Web fonts and Sprites

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.

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


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.

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


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.

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.

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


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:

Next, transitions for the interactive elements:


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:

CSS:


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!

Advertisement