Create a Clean and Stylish Login Form With HTML5 and CSS3

Following on from my Photoshop tutorial last week, How to Create a Clean and Stylish Login Form In Photoshop I will walk you through how to code the form up from the initial Photoshop concept into HTML5/CSS3, I will also use the awesomeness that is @font-face to implement the stylish Miso font.

Get our posts emailed to you with our monthly newsletter, subscribe here.

Following on from my Photoshop tutorial last week, How to Create a Clean and Stylish Login Form In Photoshop I will walk you through how to code the form up from the initial Photoshop concept into HTML5/CSS3, I will also use the awesomeness that is @font-face to implement the stylish Miso font.

View the Demo

The Form

Using HTML5 to build forms allows you to utilize allot more functionality with form inputs, it also allows you to write less code! Two HMTL5 features we will be using will be ‘autofocus’ and ‘required’.

HTML5 Form Attributes

The raw form result:

HTML5 ‘reqiured’ allows you to specify that the field is required and cannot be submitted without a value, it will also allow you to add CSS to the ‘required’ input. Likewise the ‘autofocus’ attribute specified that the input field should be focused on page load.

Styling The Form

First I will style our input fields, I will use CSS3 to create the rounded corners and the inner shadow. To create the rounded corners use: -webkit-border-radius, -moz-border-radius, and border-radius attributes. To create the inner shadow letterpress effect on the inputs I use the box-shadow property but with a minus (-1px) shadow. This brings the shadow form the outside of the input, logically into the inside.

The result look like so:

The labels for the form required I use a font called Miso, to use this font on the web without annoying extra images required me to use the fantastic @font-face property. Using font-face is really simply, you just need an openType font which you can upload to your server.

The result will look like so:

Next I will create the submit button, again using CSS3, the button will use the same border radius properties however I will also add a CSS3 gradient, when the button is hovered the gradient will change subtly to make it more interactive. When the button is clicked, I will also add a CSS3 outer shadow to emphasise the user pressing the button. Take a look below to see the button code.

6 Comments

Nice post however oit would be more useful if you didn’t do your code sections as images. it makes this difficult for those of us with high DPI monitors as it does not scape correctly as with normal text.

Very nice article. Rather helpful, thank you for posting it. Not sure the error message is suitable though. Takes away from the real clean and crisp design of the login box itself. Otherwise, its awesome, thanks!