In our last article about CSS3, href="http://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/">“Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons.

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder — a lot of the CSS properties we’re going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff). Apparently, if you are one of those people who is waiting until using progressive CSS is safe because all major browsers support the same CSS at the same time, href="http://www.stuffandnonsense.co.uk/blog/about/you8217re_living_in_a_fantasy_world/">you are living in a fantasy world, so it’s just the right time to get things rolling with CSS3.

Ready? Let’s roll.

Inline Form Labels

Everyone’s familiar with inline form labels — storing the label of the field in the value attribute and using some minor JavaScript to erase the text when the field gains focus. This works…okay, but the major problem is that as soon as the user clicks, they lose the label entirely. If they tabbed right into it they may not even have read the label, in which case they’re just guessing.

The first site we saw that fixed this was href="http://www.me.com">MobileMe from Apple, on their login screen.

href="http://www.me.com"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/inline-1.jpg" width="638" height="214" alt="Inline-1 in Stronger, Better, Faster Design with CSS3" />

What happens with Apple is that clicking into the field fades the label back, but doesn’t erase it. Cooler still is that the cursor stays positioned left so you can start typing, and the JavaScript making that happen is not overly complex — it’s just layout tricks. They position a label behind the input containing the name of the field. href="http://www.zurb.com/article/271/making-forms-convert-through-awesome-inli"> src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/12/inline-2.jpg" width="200" height="176" style="float:right; margin: 20px 0px 20px 20px;" alt="Inline-2 in Stronger, Better, Faster Design with CSS3" /> When you click into the field they use JavaScript to apply a class to the label that knocks it back, and another class as you start typing to make the label vanish.

We wrote a href="http://www.zurb.com/article/271/making-forms-convert-through-awesome-inli">blog post about this effect some time ago, describing how you could replicate it yourself. The problem is that over time setting up the page to support this isn’t as turnkey as we’d like, so we’ve revised and rebuilt it just for you (and, of course, for us).

The New Inline Label

Our new approach is considerably easier — to use it in our own products (like href="http://www.notableapp.com">Notable and href="http://www.itsscrumptious.com">Scrumptious) we simply add class="inlined" to the label and voila! Here’s how we do it.

Start with a regular label and input:

	<label for="demoForm1">Email Address</label>
	<input class="input-text" id="demoForm1" />

In previous iterations of this technique we went to the trouble of wrapping the label and input in a block-level element and used absolute positioning to put the label behind the input. Not anymore. First, we’ll add the “inlined” class to only the label:

	<label for="demoForm1" class="inlined">Email Address</label>
	<input class="input-text" id="demoForm1" />

Now we need to do a couple of things to get our labels to display correctly. First, we use negative margins to pull the input up and over the label. We’ll do this by using the CSS adjacent selector, which looks like this:

	label.inlined + input.input-text {
		margin-top: -22px;
		background-color: transparent;
		position: relative; z-index: 2;
	}

That code tells the browser to apply the style to any input.input-text which immediately follows a label.inlined — this way we can use the negative margin to pull the input up and over the label itself. We also set the background color to transparent and give the input a relative position and a z-index value.

Next we need to style the label itself. You’ll need to adapt the styling here to mirror your input text style — the goal is for the text inside the label to appear as though it is actually part of the input. Here are the critical pieces:

	label.inlined {
		padding-left: 6px;
		font: normal 12px/18px "Helvetica Neue";
		position: relative; z-index: 1;
		opacity: 0.75;
		-webkit-transition: opacity 0.15s linear;
	}

Let’s break that down. Padding and font are simply to mirror the input style. The positioning and z-index make sure the label stays behind the input — otherwise the input can’t be selected. Now the fun parts: opacity and -webkit-transition.

Our form labels work by fading back the label at different points. We start with the label faded back a little, hence the opacity: 0.75. You could also use color to drop the label back, but opacity works regardless of the font color. We add in the -webkit-transition so that whenever the opacity changes, the browser (Safari or Chrome, in this case) will change the opacity smoothly over about 1/8th of a second. So when does the opacity change?

Two times — when the user focuses on the field, and when they start typing. Let’s create two CSS classes we can apply for those states: focus and has-text.

	label.focus {
		opacity: 0.35;
	}

	label.has-text {
		opacity: 0.0;
		-webkit-transition-duration: 0s;
	}

As you can see, we reduce the opacity of the label when the user clicks in, then make it invisible when they start to type. We change the duration of our transition so that as a user starts to type, the label disappears immediately, rather than fading back as they type. Now that we have our fields structurally set up and styled the way we want, the last step is a little bit of JavaScript.

Adding the JavaScript

Even though CSS3 has added new tricks like animations and transitions, JavaScript is still king when it comes to interaction. To get our labels to behave, we need to use a few simple JavaScript functions. In these examples we’ll be writing for href="http://www.jquery.com">jQuery, but they’re easy to adapt to href="http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/www.prototypejs.org">Prototype or straight JavaScript.

The JavaScript needs to do three things:

1. Add the focus class to the label when the user clicks into a field
2. Add the has-text class as soon as they start typing
3. Bring the label back if they leave the field empty and switch to another field.

$(document).ready(function(){
	$("label.inlined + input.input-text").each(function (type) {

		$(this).focus(function () {
			$(this).prev("label.inlined").addClass("focus");
		});

		$(this).keypress(function () {
			$(this).prev("label.inlined").addClass("has-text").removeClass("focus");
		});

		$(this).blur(function () {
			if($(this).val() == "") {
				$(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
			}
		});
	});
});

We won’t pore over the JavaScript much — it’s pretty self-explanatory. jQuery let’s us quickly target the inputs we want by recognizing the same selector we’re using in CSS, but otherwise it’s all cut and dried. And there it is: inline labels that appear as refined versions of standard inline labels, but have much smoother interaction. Going forward now we can make any label inline by adding class="inlined" to the label — CSS and JavaScript will take care of the rest.