If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you.
In this article you’ll find out how to design a clean and attractive CSS3 signup form.
In the past, I have designed some sign in forms, but never a signup form. So, to get the job completely done, I decided to write this article.
Here’s how the markup looks like for this signup form:
For this example, I decided to use a
buttton instead of the classic
input type="submit". This way, further, it will be a lot easier to target the form’s elements (without adding any id’s or classes).
You can easily notice the new HTML5 stuff like
required. For the placeholder attribute, we’ll add a HTML5 polyfill that will simulate its effect for older browsers.
In this example, we’ll be using Mathias Bynens’s Placeholder jQuery plugin. That’s a very cool one and it’s highly recommended.
As usual, I’ll list below the styles used for this example. Prefixed properties are missing here, but you can find them in the demo page source.
After I created a simple
3x4 image pattern, I converted it into a base64 string. To do that, I used this wonderful Image to Base64 Converter tool. You can see it in the styles as a background for
Regarding the paper stack effect, this time we’re using the
pseudo-elements to do that. Here’s one of my previous articles where I used a similar technique.
I tried to create a nice and abstract design for the form’s heading, so here’s my result:
Using pseudo-elements (again) :)
Not so much to say here. For the submit button, please notice the gradient transition workaround.
I’m aware that this example does not contain revolutionary techniques, but neither shouldn’t. The possibilities are endless when it comes about web forms styling, as long as you follow up the best and recommended practices.
This is just another cool example created using CSS3’s great power. I hope you will find it useful for your projects, and please don’t forget to leave a comment if you liked it (or not). :)