Styling a Simple Form using CSS3

Recently, I had a simple project of designing and developing a newsletter subscription form that was only going to be viewed on and iPhone or iPod Touch device. The form, and all of the inputs, would have nice rounded corners (which I am an admitted sucker for) and subtle gradients.

Normally, we would achieve all of these effects by slicing up our Photoshop mock-up into individual background images that would later be implemented using the CSS background property. But, since I knew this particular form would only been seen on the iPhone and iPod Touch Safari browser, I decided to have have some fun with CSS3 properties, via Webkit, and replicate the entire mock-up without using any images at all.

The end result came out quite nicely. If all current modern browsers supported CSS3 properties, we would have significantly quicker page loads and would need less images to do our presentational dirty work.

In this little tutorial, I will show you how I accomplished these effects and take it one step further to include the 3.6a version of Firefox.

View Demo

Step 1: Mark up your form

There is nothing spectacular about the mark up for the page. In fact, it is a simple form with three inputs (two text fields and a Submit button). There is also a <h2> tag for the title of the form which is completely optionally. Open up your favorite code editor and add the following code to your page:

<div class="wrapper">
	<h2>Sign up for our Newsletter</h2>
 
	<form id="simple-form" action="" method="" name="">
		<label for="input-1">Name</label>
		<input type="text" name="input-1" id="input-1" />
 
		<label for="input-2">E-mail</label>
		<input type="text" name="input-2" id="input-2" />
 
		<input type="submit" name="submit" id="submit" value="Submit">
	</form>
</div>

As you can see, there is nothing new here. You have your form, which we are assigning an id of #simple-form, form labels and inputs with assigned id’s of #input-1 and #input-2. We are going to target each of these id’s in our next steps to produce gradients, rounded corners and a shadow.

Step 2: Add some basic styles to your page.

I recommend using a CSS reset file so you are always starting with a clean slate. If you do not have a reset file of your own, download ours and insert it into the head of your document before the call for your own stylesheet. Once you have done this, add the following to your own stylesheet:

body {
	background-color: #ececec;
	color: #565656;
	font: 62.5% Helvetica, Arial, sans-serif;
}
 
.wrapper {
	margin: 0 auto;
	position: relative;
	width: 320px;
}
 
h2 {
	font-size: 2em;
	margin: 25px 0 0;
	text-align: center;
}

You will notice that I’ve also given the page a background color of light gray and set the typography to a universal font-size of 62.5% using Arial, Helvetica or next available sans-serif font. I’ve also set a universal color of dark gray for the all of the type. The .wrapper is here for demo and the tutorial purposes only.

Step 3: Add the CSS3 magic to your form.

Here is where the fun begins. To create the rounded corners, gradients and shadows that are available to in CSS3, we have to use vendor specific extensions in conjunction with our original properties. Let’s add a background color of white to our form and a subtle shadow surrounding it. I am also going to give my form a width, margin and padding that is specific to this tutorial. What you want to pay attention to are the extensions that begin with -webkit- and -moz- targeting the Safari and Firefox browsers respectively.

form#simple-form {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-box-shadow: 2px 2px 10px #ccc;
	background-color: #fff;
	margin: 25px auto 0;
	padding: 25px 10px;
	text-align: center;
	width: 260px;
}

What we’ve done here is set the border-radius of all four corners to 20 pixels which will give us a nice round edge. What may not be as obvious is the box-shadow property. The shorthand declaration takes four attributes:

• The distance of the shadow on the x-axis (2px).
• The distance of the shadow on the y-axis (2px).
• The amount of blur radius to apply to the shadow (10px) with 0 being sharp.
• The color to apply to the shadow (very light gray).

Now, let’s style the labels and inputs for the form. We are going to be using border-radius once again, but this time we are going to apply a gradient to the inputs as well.

form#simple-form label {
	display: block;
	font-size: 1.65em;
	font-weight: bold;
	letter-spacing: -0.025em;
	margin: 0 0 5px 15px;
	text-align: left;
 
}
 
form#simple-form input#input-1, form#simple-form input#input-2 {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	background-color: #eaeaea;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));
	border: 1px solid #cacaca;
	color: #444;
	font-size: 1.4em;
	margin: 0 0 25px;
	padding: 8px 10px;
	width: 240px;
}
 
form#simple-form input#submit {
	-moz-border-radius-bottomleft: 32px;
	-moz-border-radius-bottomright: 32px;
	-moz-border-radius-topleft: 32px;
	-moz-border-radius-topright: 32px;
	-webkit-border-bottom-left-radius: 32px;
	-webkit-border-bottom-right-radius: 32px;
	-webkit-border-top-left-radius: 32px;
	-webkit-border-top-right-radius: 32px;
	background-color: #dedede;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #dedede));
	border: 1px solid #dedede;
	color: #484848;
	font-size: 1.65em;
	font-weight: bold;
	padding: 10px 15px;
}

With the -moz-linear-gradient and -webkit-gradient attributes, we can replicate the gradients created in Photoshop right in the browser without any images. The two are slightly different from one another on how you implement them, but the effect is exactly the same.

For webkit, you must establish the type of gradient (linear), the starting point (left top), the ending point (left bottom), the color-stop, color value and origin point of the first color (white starting at the very top), and the same the the second color (gray starting that the end). For moz, you can either use -moz-linear-gradient (in this case) or -moz-radial-gradient. For a simple gradient like this one, state the origin point and two colors and you are done.

The Demo

If you are browsing with either Safari 4 or Firefox 3.6a, you will be able to see CSS3 wizardry in action, which leads me to the caveat of this post. As of now, these properties are experimental and only a part of the CSS3 draft. Therefore, they are subject to change at any time. So, when you combine this with the lack of universal support, I recommend sticking to your tried and true methods for now or use them sparingly with a graceful degradation for unsupported browsers.

View Demo