Toggle Quick Contact Bar

About Nkraf.com

Styling a Simple Form using CSS3

Posted by swai

15 Jan 2010 — 10 Comments

Posted in Tutorials

CSS3 Form Screenshot

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.

CSS3 Form Screenshot

CSS3 Form Screenshot

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 →

About swai

Browse posts by

Related Blog Posts

10 Comments

There are currently 10 Comments on “Styling a Simple Form using CSS3”. Perhaps you would like to add one of your own?

  1. Selina Kyle

    31 May 2011 @ 10:25 am

    I know that this post is old, but can’t you simplify the vendor extensions to read -webkit-border-radius: 20px; -moz-border-radius: 20px; since all of the corners are equal?

    Reply

    • Erik Ford

      31 May 2011 @ 10:31 am

      You are 100% correct. If all of your corners are going to have an equal radius, you simply declare the it once for all corners. Also, as more and more modern browsers add support for CSS3 declarations, you should also make sure you add border-radius: 20px; after the vendor specific declarations.

      Reply

      • Selina Kyle

        31 May 2011 @ 10:37 am

        Thanks for the update. That is what I figured.

        … as more and more modern browsers add support for CSS3 declarations, you should also make sure you add border-radius: 20px; after the vendor specific declarations.

        Should we do this for all CSS3 declarations?

        Reply

        • Erik Ford

          31 May 2011 @ 10:50 am

          Definitely. This will keep your stylesheet forward compatible and prevent you having to go back and add these later. In the event a browser, IE8 and IE9 for example, do not support the CSS3 declaration, it will simply ignore it.

          Reply

  2. Norman Osbourne

    31 May 2011 @ 10:56 am

    I think that we should avoid using CSS3 declarations CSS files until the specs have been approved. I know the temptation is to play with the “new toy” but you should consider maintaining user experience across all browsers over being the cool kid on the block.

    Reply

    • Erik Ford

      31 May 2011 @ 11:02 am

      I understand what you are saying but I don’t wholeheartedly agree. CSS3 declarations should be used in moderation until the specs are approved. I would never advocate using them exclusively for a client’s website without an in depth conversation with said client.

      Reply

    • Scott Summers

      31 May 2011 @ 11:08 am

      I completely disagree with Norman. According to Wikipedia, the original specs for CSS3 were introduced back in 1999. That is over 12 years ago! How long to you expect to wait for approval to start using these declarations that dramatically improve the load speed of our pages?

      Reply

      • Norman Osbourne

        31 May 2011 @ 11:15 am

        Scott, I was merely suggesting that we should be careful with the ASAP mentality that we web developers tend to have. We must always consider the larger picture first and foremost.

        Reply

        • Scott Summers

          31 May 2011 @ 11:23 am

          “We must always consider the larger picture first and foremost.”

          I don’t think that, by using CSS3 now, we are losing sight of the larger picture. If a browser doesn’t support it, usually an IE browser, it will ignore the declaration. I can live with that.

          Reply

  3. Dick Grayson

    31 May 2011 @ 12:21 pm

    This has saved me a ton of time! I no longer have to slice up my PSD just to get gradients and rounded corners.

    Reply

Leave a Comment