Register form with HTML5 using placeholder and CSS3 part 2

You have probably seen the first part of this tutorial. Like I told you in the second part we will make that form look better using CSS3.

But that’s not all. I told you that this form will have an animate effect but not using JavaScript only CSS3. I know you probably know this property and what it does. If not: CSS3 transitions are effects that let an element gradually change from one style to another.

Here is the full demo page.

As you can see the form now looks a lot better. And when you click on the inputs you can see the way they getting bigger and they animate.

This is how the form will look after inserting the CSS.

Here is the entire CSS code:

#wrapper {
 width:450px;
 margin:0 auto;
 font-family:Verdana, sans-serif;
}
legend {
 color:#0481b1;
 font-size:16px;
 padding:0 10px;
 background:#fff;
 -moz-border-radius:4px;
 box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
 padding:5px 10px;
 text-transform:uppercase;
 font-family:Helvetica, sans-serif;
 font-weight:bold;
}
fieldset {
 border-radius:4px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #f9fdff);
 background: -o-linear-gradient(#fff, #f9fdff);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
 background: -webkit-linear-gradient(#fff, #f9fdff);
 padding:20px;
 border-color:rgba(4, 129, 177, 0.4);
}
input,
textarea {
 color: #373737;
 background: #fff;
 border: 1px solid #CCCCCC;
 color: #aaa;
 font-size: 14px;
 line-height: 1.2em;
 margin-bottom:15px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
input[type="text"],
input[type="password"]{
 padding: 8px 6px;
 height: 22px;
 width:280px;
}
input[type="text"]:focus,
input[type="password"]:focus {
 background:#f5fcfe;
 text-indent: 0;
 z-index: 1;
 color: #373737;
 /* this is the code for transition effect */
 -webkit-transition-duration: 400ms;
 -webkit-transition-property: width, background;
 -webkit-transition-timing-function: ease;
 -moz-transition-duration: 400ms;
 -moz-transition-property: width, background;
 -moz-transition-timing-function: ease;
 -o-transition-duration: 400ms;
 -o-transition-property: width, background;
 -o-transition-timing-function: ease;
 width: 380px;
 border-color:#ccc;
 box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
 opacity:0.6;
}
input[type="submit"]{
 background: #222;
 border: none;
 text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 text-transform:uppercase;
 color: #eee;
 cursor: pointer;
 font-size: 15px;
 margin: 5px 0;
 padding: 5px 22px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-border-radius:4px;
 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
 box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
textarea {
 padding:3px;
 width:96%;
 height:100px;
}
textarea:focus {
 background:#ebf8fd;
 text-indent: 0;
 z-index: 1;
 color: #373737;
 opacity:0.6;
 box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
 border-color:#ccc;
}
.small {
 line-height:14px;
 font-size:12px;
 color:#999898;
 margin-bottom:3px;
}

This is the whole CSS3 code for the register form. Notice that in the HTML I have used fieldset, legend properties so that your form have a name. Using HTML5 placeholder attribute the text shown in the inputs. It’s working very good on input type password and on textarea as well. So having this attribute you don’t need JavaScript plugins or other things to do that.

The transition effect

-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;

This CSS property can be used in many different ways. Not only on input's but creating a menu or using them on image slider. It’s up to us how do we want them to be used.
So let’s explain the code above. You probably sow that for each browser I had to declare the transition independently. I will talk about the -webkit support because the same rules apply to the other browsers as well.

-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;

In the first declaration transition-duration property defines the length of time that a transition takes. On the second line transition property property specifies the name of the CSS property to which the transition is applied. Finally transition-timing-function property describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions. In either case, a mathematical function that provides a smooth curve is used.

I could talk about the rest of the CSS code but you probably know what it does so in stead of making a huge post I’ll stop here.
If you want me to explain the rest of the code please write me an comment and I’ll promise that I’ll explain in details the rest of the code. But mainly I used CSS3 for all the elements so it looks better.

CSS transition compatibility:

Firefox
Safari
Chrome
Opera

Unfortunately in IE it’s not working but if you test it in IE you can see that in IE8 and IE9 the focus that makes the input’s bigger are working. In IE7 the :focus it’s not working.
So what I want to say is that this form it’s not quite optimized for IE. I hope you don’t mind.

Here is the standalone page example.

Share the knowledge

  • Facebook
  • Twitter
  • Google Plus
  • LinkedIn
  • StumbleUpon
  • Digg
  • Delicious
  • Reddit

2 thoughts on “Register form with HTML5 using placeholder and CSS3 part 2

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">

Comment moderation is enabled. Your comment may take some time to appear.