Knowing that, check out the below preview to see the login form we’re going to create in this article:
The HTML5 stuff
New HTML5 attributes descriptions, according to latest specifications:
placeholder - A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
required - Specifies that the element is a required part of form submission.
autofocus - Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
type=”password” - Specifies that its input element is a one-line plain-text edit control for entering a password. (not HTML5 specific)
For this article, I will not paste the whole lines here. Instead, I’ll just add the ones who help creating some cool effects.
Paper stack effect
Box-shadow will help us creating this nice effect by defining multiple shadows that actually overlap.
This effect is added using pseudo-elements. Using pseudo-elements helps you avoid extra markup and this is a perfect example: keep the markup clean and let the CSS do the magic.
Subtle gradient lines
I’ve first seen this effect on Gene Locklin’s page and I thought this is pretty cool. So, I decided to use it for highlighting the “Log in” heading. Using pseudo-elements (again) and CSS3 gradients some cool lines are added to simulate a strikeout effect.
The final result
Using the above techniques, here’s the final result:
This login form looks very well also on older browsers, as you can see below:
Internet Explorer 8 screenshot.
As a future improvement, you can add also HTML5
placeholder fallback as you have seen in one of my previous articles.
Just some other awesome CSS3 buttons
CSS tabs with beveled corners