Creating a nice designed HTML form without using images it’s not such difficult. Using CSS3 we can create shadows, rounded corners or even gradients. As we all know that you can’t see any shadow, rounded corners, gradients or other CSS3 stuff in Internet Explorer, this form design is good for CMS or internal pages where the public don’t have access. However, it’s not such bad looking either if you’re using IE, But please, don’t use IE6.

All others major browsers let us to view the amazing CSS3 features, so if you are using Opera, Firefox, Chrome or Safari you can enjoy this design.

Ok let’s take a look in the css code:
For the main box, the css3 elements are the shadow and the rounded corners. Using box-shadow: 0px 0px 10px #888, will create a shadow with 0px left offset, 0px top offset and 10px blur effect. The color of the shadow is #888. By changing the first 2 elements, you can move the shadow in every direction. I also used -moz-box-shadow and -webkit-box-shadow which will allow us to see this design in Mozilla Firefox and Safari or Chrome. How about those rounded corners? Using border-radius:10px, we don’t need anymore to slice up some images with these rounded corners and also we’ll have full control on changing the radius or the color or the border.

#form-container {
	background:#F9F9F9;

	border: solid 1px #ddd;

	border-radius:10px;

	-moz-border-radius: 10px; 

	-webkit-border-radius: 10px;

	box-shadow: 0px 0px 10px #888;

	-moz-box-shadow: 0px 0px 10px #888;

	-webkit-box-shadow: 0px 0px 10px #888;

	margin:0px auto;

	padding:15px;

	width:500px;
}

I used the rounded corners feature also creating the text inputs and the button, or the error and success message boxes. You can easy change whatever you want in this design, all the elements are created using css. A good things about this kind of design is that we don’t have any http requests for background images. This is an important thing and I’ll write more about this subject in a following post.

CSS code

body { font-family:Arial, Helvetica, sans-serif; font-size:13px; }

#form-container {
	background:#F9F9F9;

	border: solid 1px #ddd;

	border-radius:10px;

	-moz-border-radius: 10px; 

	-webkit-border-radius: 10px;

	box-shadow: 0px 0px 10px #888;

	-moz-box-shadow: 0px 0px 10px #888;

	-webkit-box-shadow: 0px 0px 10px #888;

	margin:0px auto;

	padding:15px;

	width:500px;
}

#form-container h2 { font-size:18px; color:#333; padding:0px; margin:0px 0px 10px 0px; }

fieldset, form { padding:0px; margin:0px; border:none }

#form-container .field  { clear:both; margin:0px; padding:10px 0px; }

label { width:120px; }

input[type=text], textarea {

	background:#fff;

	border:solid 1px #E5E5E5; 

	border-radius:5px;

	-moz-border-radius: 5px; 

	-webkit-border-radius: 5px;

	width:250px;
}
textarea { height:120px }

label, input[type=text], textarea { padding:9px 5px; float:left }

input[type=text]:focus, textarea:focus { background:#EDF3FC; padding:8px 5px; border:solid 2px #D5E3F9; }

.submit-button {
	background: #57A02C;

	border:solid 1px #86CC50;

	border-radius:5px;

		-moz-border-radius: 5px; 

		-webkit-border-radius: 5px;

	color:#FFF;

	cursor:pointer;

	font-size:13px;

	margin-left:130px;

	padding:3px 8px;
}
.submit-button:hover { background:#82D051 }

.error {background: #ffcece; border:solid 1px #df8f8f; }

.success {background: #d5ffce; border:solid 1px #9adf8f; }

.error, .success {

	border-radius:5px;

		-moz-border-radius: 5px; 

		-webkit-border-radius: 5px;

	color:#333;

	padding:9px;

	margin-bottom:10px;
}

HTML code

Submit your comment


Error message.
Success message.

          Your Name:


          Your Email:


          Your Website:


          Comment:
          

Live demo

Click here for live demo.

Let’s assume we want to create a navigation bar similar with the one below. I think a lot of web developers know how to create it. We slice the “1px width” image with the black gradient, one similar image with the green gradient and so on for other colors. If you see here the demo, you’ll see that every button has his own color. So, the conclusion might be that we’ll need for each button a different “1px width” image with every gradient we want to use.

If you want to change the colors, also you’ll need another images. The goal here is to create a menu which doesn’t need to have different images for each color. We’ll set the colors by changing the hex code in our CSS file. For the gradient we’ll use only one image which you can download it here. It’s a transparent png image, with gradient. The gradient and the transparency over a color, will create the gradient effect for every color used.

I have to mention that this menu will work properly only on browsers like ie7+, firefox, chrome, safari and opera. Internet explorer 6 doesn’t support transparent png files, and I hadn’t tested it in other browsers.

CSS code

#menu, #menu li { background-color:#000; } – This line will change the background of the main menu. The latest classes ( .blue:hover and the others ) will change the background color for the buttons. You have to declare some classes with the colors you want, and then apply them to each button, making this menu easy to customize. Class .hover has the transparent png file as a background.

body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

#wrapper { width:960px; margin:10px auto; }

.hover { background:url(hover.png) repeat-x; }

#menu { height:50px; line-height:50px; }

#menu ul { padding:0px; margin:0px; list-style:none }

#menu ul li { margin:0px 25px; padding:0px; font-size:16px; float:left }

#menu, #menu li {  background-color:#000; }

#menu ul li a {
	display:block;  

	font-weight:bold; 

	color:#FFF;

	padding:0px 25px;

	text-decoration:none
}
#menu ul li a:hover { text-decoration:underline }

.blue:hover { background-color:#11AFD8 }
.orange:hover { background-color:#D25503 }
.green:hover { background-color:#399913 }
.yellow:hover { background-color:#D9AE08 }

HTML code

You will have to apply the “.hover” class to all buttons, and also the class containing the colors you want for each button.

Menu item 1
Menu item 2
Menu item 3
Menu item 4

Live demo

Click here for live demo.

Get it

Click here to download the files.