I started off with a simple markup.

<div class="login clearfix"><form id="twitter" action="#" method="get" name="twitter">
<fieldset>
<div class="holder"><span>Username</span> <input type="text" name="uname" /></div>
<div class="holder"><span>Password</span> <input type="text" name="pword" /></div>
<div class="holder btn"><input type="submit" name="signin" value="Sign In" /></div></fieldset>
</form></div>

After this I added some basic form styling and a blue background to get that twitter feel.

.login {
background-color:#53718b;
padding:50px;
text-align:center;
}

form#twitter {
width:400px;
margin:0 auto;
}

.holder {
float:left;
width:160px;
position:relative;
}

.holder.btn {
width:70px;
}

.holder span{
position:absolute;
font-size:10px;
color:#86888b;
left:15px;
top:6px;
text-shadow:1px 1px #fff;
}

After this I began to use some CSS3 effects to spice up the input boxes, Gradients, Box Shadow, Text-Shadow and Border Radius, yep there all here.

form#twitter input[type=text] {
padding:8px 6px;
font-size:10px;
color:#5f6061;

text-shadow:1px 1px #fff;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* future proofing */

-khtml-border-radius: 3px; /* for old Konqueror browsers */
border:0 none;

-moz-box-shadow:inset 0 1px 0 #3c556a, inset 0 -1px 0 #e4eaef;
-webkit-box-shadow:inset 0 1px 0 #3c556a, inset 0 -1px 0 #e4eaef;
box-shadow:inset 0 1px 0 #3c556a, inset 0 -1px 0 #e4eaef;

background-color:#d4dee5;

width:140px;
}

form#twitter input[type=submit] {
padding:6px;

font-weight:bold;

text-shadow:1px 1px #fff;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */

border:0 none;

-moz-box-shadow:inset 0 -1px 0 #5f666c;
-webkit-box-shadow:inset 0 -1px 0 #5f666c;
box-shadow:inset 0 -1px 0 #5f666c;

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#fff, #d1d4d6);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d4d6), to(#fff));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#fff, #d1d4d6);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#fff, #d1d4d6);

background-color:#fff;

cursor:pointer;

}

Next step was to add the ‘hover’ and ‘focus’ states for the input elements. The focus state now have 3 variations of the box shadow effect, 2 insets, top and bottom and one large outer glow.

form#twitter input[type=text]:hover {
background-color:#dce4ea;
}

form#twitter input[type=text]:focus {
color:#5f6061;
background-color:#ecf1f4;

-moz-box-shadow:inset 0 1px 0 #7394b0, inset 0 -1px 0 #fff, 0 0 8px #fff;
-webkit-box-shadow:inset 0 1px 0 #7394b0, inset 0 -1px 0 #fff, 0 0 8px #fff;
box-shadow:inset 0 1px 0 #7394b0, inset 0 -1px 0 #fff, 0 0 8px #fff;
}

I also added some ‘hover’ and ‘active’ states on the submit button.

form#twitter input[type=submit]:hover {
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#e7eaec, #d1d4d6);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d4d6), to(#e7eaec));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#e7eaec, #d1d4d6);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#e7eaec, #d1d4d6);

}

form#twitter input[type=submit]:active {
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#d1d4d6, #fff);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d1d4d6));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#d1d4d6, #fff);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#d1d4d6, #fff);
}

That is the main styling done, the last piece is to add the transition effect that twitter has for when a user begins to type data into the input boxes. For this I call upon a simple jQuery snippet to check to see if the user is typing data.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">// <![CDATA[

	$('.holder input').keypress(function() {
  		$(this).parent().addClass('hassome')
	});

// ]]></script>

What this is doing is targeting the input boxes and using the listener ‘keypress’ to detect if a user is using the input box. If so then the class ‘hassome’ is being added to the parent element which then has this styling.

.holder.hassome span{
font-size:0px;
opacity: 0;
/* Firefox */
-moz-transition: font-size 0.5s 0.1s, opacity 0s 0s;
/* WebKit */
-webkit-transition: font-size 0.5s 0.1s, opacity 0s 0s;
/* Opera */
-o-transition: font-size 0.5s 0.1s, opacity 0s 0s;
/* Standard */
transition: font-size 0.5s 0.1s, opacity 0s 0s;
}

So to make the text fade out I am using the CSS3 property ‘transition’ to change the font-size property to 0px over a duration of 0.5s and also changing the opacity down to 0.

See a demo of the finished product.

Anyone looking for another option I would recommend it!