This tutorial will show you how to style a form using CSS3. The end product is nothing too flashy but it looks good enough. I really wanted to keep it simple and show you how to create an appealing form using just a couple of the CSS3 properties.
Below is a example of the completed form(it will probably look better on a white background):
Below is the HTML for the form, i wont go over this as it is not within the scope of this tutorial:
<form method=”post”>
<div>
<p>Your Email:</p>
<input name=”userMail” type=”text” />
<p>Your Name:</p>
<input name=”userName” type=”text” />
<p>Your Comment</p>
<input name=”siteName” type=”text” />
<input type=”submit” value=”Contact us” />
</div>
</form>
And the CSS:
You may notice that some of the code has been repeated, but with an added prefix (such as -webkit-). These ensure that CSS3 properties work on all modern browsers (-moz- for firefox, -webkit- for chrome etc.).
.StylishForm {
background:#e4e4e4;
margin:15px;
width:332px;
border:thin solid #d0d0d0; /* This is the outer border, inner border will be added to the div contained within*/
border-radius:8px; /* Add rounded corners to the form*/
-moz-border-radius:8px;
-webkit-border-radius:8px; float:left;
box-shadow: 5px 5px 7px #888; /* Add shadow to the form – First two values are shadow offset, third is blur radius*/
-webkit-box-shadow: 5px 5px 7px #888;
-moz-box-shadow: 5px 5px 7px #888;
}
.StylishForm div {
padding:15px; /* Add some spacing to the edges of the form */
border:thin #f4f4f4 solid; /* Inner border */
float:left;
border-radius:8px; /* Add rounded corners to the inner border*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:300px;
}
.StylishForm p{
color:#9a9999;
}
.InputText {
width:300px;
}
.InputSubmit {
float:right;
margin-top:15px;
}
And there you have it. Some really simple code for a decent end product. If you want to make it look even better try experimenting with the text-shadow property!
Cheers for reading.
