Nicole Henningsen's Blog
Posted At : October 25, 2007 9:10 AM | Posted By : Nicole Henningsen

Fun form CSS

I was playing around the other day doing some testing on some different types of forms. Here is an example of a form with a little shadowing (Tested On IE).

Find out More...

This is an example of a form I did to look like a piece of paper with some shadowing around the text boxes. Just kind of a fun form to give you something a little different than just your standard form.
The font can be downloaded from 1001fonts.com under hand written. The font is called Merri Christina. The paper image was one I found on Stock.xchng one of my favorite royalty free image websites! Check them out Here

The CSS

<style type="text/css">
.style1 {
   font-family: "Merri Christina";
   font-weight: bold;
}
.input{
border: 1px solid #000000; background-color: #ffffff; padding: 5px;
}
.submit{
border: 1px solid #000000;
background-color: transparent;
padding: 5px; font-weight:bold;
}
.tableBG
{
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
}
.shadow1{
width:40px;
padding:3px;
filter:shadow;
color:gray;

}
.textbox{
width:40px;
text-align:left;
padding:3px;
background-color:transparent;
font-size:10px;
}

</style>

The HTML
<form name="play" method="post" action="">
<table width="683" height="476" class="tableBG">
<tr>
<td width="28" height="24">&nbsp;</td>
<td width="108">&nbsp;</td>
<td width="164">&nbsp;</td>
<td width="175">&nbsp;</td>
</tr>
<tr>
<td height="84">&nbsp;</td>
<td><div align="right"><span class="style1">First Name:</span></div></td>
<td width="164"><div class="shadow1">
<div class="textbox">
<input type="text" class="input" name="fname1">
</div>
</div></td>
<td width="175" class="style1"><div align="right">Last Name:</div></td>
<td width="187"><div class="shadow1">
<div class="textbox">
<input type="text" class="input" name="lname1">
</div>
</div></td>
</tr>
<tr>
<td height="60">&nbsp;</td>
<td><div align="right"><span class="style1">City:</span></div></td>
<td width="164"><div class="shadow1">
<div class="textbox">
<input type="text" class="input" name="city">
</div>
</div></td>
<td width="175" class="style1"><div align="right">State:</div></td>
<td width="187"><div class="shadow1">
<div class="textbox">
<input type="text" class="input" name="state">
</div>
</div></td>
</tr>

<tr>
<td colspan="3" rowspan="2"><div align="center"><span class="style1">Comments:</span></div>
<div align="center"><br>
<br>
<br> <br>
<img src="images/nr.gif" width="151" height="128"></div></td>
<td height="189" colspan="2">
<div class="shadow1">
<div class"textbox">
<textarea name="city" cols="35" rows="10" class="input"></textarea>
</div>
</div> </td>
</tr>
<tr>
<td height="105" colspan="2"><div align="center">
<input type="submit" name="submit" class="submit">
</div></td>
</tr>
</table>
</form>
Example

Related Categories: CSS
Comments (2) | Print | del.icio.us
Comments
[Add Comment]
css textboxt ?nput (textfield) style - examples - -
http://www.css-lessons.ucoz.com/textbox-css-exampl...
# Posted By chester.. | 5/23/08 10:02 PM
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
# Posted By xxwcemil | 6/7/08 5:45 AM
[Add Comment]



Blog provided and hosted by CF Webtools. Blog Sofware by Ray Camden.