Design a Prettier Web Form with CSS 3

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!

This tutorial includes a screencast available to Tuts+ Premium members.

Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.

By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.

CSS3?

CSS3 is the next generation of CSS that is currently under development, but that doesn’t stop browsers from already implementing many of the prominent features.

Opera has greater levels of support for CSS3 (except background gradients) in their next version (10.50 Beta).

Internet Explorer has also stated that they will have improved CSS3 support with version 9; however, only time will tell how true this is.

The things you can do with CSS3 (shadows, gradients, round corners, animations, etc) all serve a purpose of creating beautiful effects without having to integrate images or scripts, resulting in quicker loading times.

Step 1: The HTML

Before we begin styling we need something to style, so here is the form.

Until CSS3 becomes the standard, you have to use all three methods. Internet Explorer has their own weird way of doing things, and although it’s capable of making a shadow it will not look the way we want it. 3

You might notice that there was no normal RGB color used, this is because we’re using two CSS3 techniques on the same line: box-shadow and rgba.

RGBA (Red Green Blue Alpha) is, simply put, color with opacity.

The syntax for rgba is this:

rgba(<red>,<green>,<blue>,<opacity>);

It’s perfectly fine to use a light grey for the shadow’s color, but if you are using any other background than white it will look strange. An opaque black on the other hand will work well no matter what background.

So our box-shadow is black with 10% (0.1) opacity, no horizontal and vertical offset, and with a blur of 8 pixels. It will look like this:

The keyword here is subtlety. If we apply too much shadow, it will look ugly; if we apply too little, it won’t have an effect. Basically, we don’t want anyone to notice the shadow, but still have it lift the fields from the page.

Step 4: Background Gradient

While the box-shadow syntax is easy to grasp, gradients are trickier. With CSS3 gradients, you can create some amazing shapes — from dart boards to rainbows — so as you can imagine it has a more complex syntax. Thankfully, we don’t need to code a rainbow today; we just need a straight linear gradient.

As you can see, the methods are quite different, so this will require some explaining.

Webkit gradients require a start point (X and Y), an end point (X and Y), a from-color, and a to-color. The angle is determined by where start and end are, and the gradient will be colored with the “from(color)” fading to “to(color)”.

Gecko gradients, on the other hand, require only a start point (Y), and at least two colors. If you want a gradient going from top to bottom (90deg) you don’t need to assign an angle.

So to get a simple linear gradient from top to bottom – black to white – we would do like this:

(I will continue to use the black color for demonstration; at the end, I’ll switch to the real color we will be using for the form.)

Now that we have the basics out of the way, we can start making the form look how we want. The first thing we want to do is limit the height of the gradient so that it looks the same for both input fields and textarea; otherwise the gradient would fill the entire height, like this:

This is how we limit the background gradient to 25px in Webkit and Firefox:

For Webkit, instead of setting the end point to “left bottom,” we set it to “left 25″, indicating it will end 25 pixels from the top.

For Gecko, we do the same thing by simply adding a “25px” value to the end color.

And the result is:

The second thing we want to do is create a thin white line at the top of the gradient, to give the subtle visual impression that the field is raised. How important can a single pixel be? Take a look at this article: Adding Depth with Pixel Perfect Line Work.

To create this, we’ll need three points in the gradient. In the previous example, our gradient had two points: top and bottom (black→white). Here, we’ll add an additional point in between them (white→black→white).

Conclusion

That’s all there is to it! With minimal effort, and the power of CSS 3, we’ve turned a bland and ordinary form into something beautiful. Thanks so much for reading, and feel free to ask any questions that you might have below.

Matt is an independent web designer located in Sweden and specialized in WordPress themes. He has fiddled with both PHP and ASP, but prefers the beauty of CSS. He likes things subtle, minimalistic, and always with a cup of tea at hand.