Cool contact form using CSS3

Start with a basic HTML form

<form>
<input id="name" name="name" type="text" />
<label for="name"> Name </label>
<input id="email" name="email" type="text" />
<label for="email">Email</label>

<input id="web" name="web" type="text" />
<label for="web">Website</label>

<textarea name="textarea"></textarea>

<input id="submit" name="submit" type="submit" value="Send" />
</form>

The cool CSS3 box shadow

The box-shadow property can accept a comma-serparated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset‘ keyword (to create an inner shadow, rather than the default outer shadow).

Examples:
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;
Linear gradient
http://css-tricks.com/5700-css3-gradients/

The CSS

input,textarea
{
 padding:9px;
 border: 1px solid #e5e5e5;
 outline:0;
 font: normal 13px/100% verdana,tahoma,sans-serif;
 width:200px;
 background:#ffffff;

 -moz-box-shadow: rgba(0,0,0,.1) 0 0 8px;
 background:-moz-linear-gradient(top,#ffffff,#eeeeee 1px,#ffffff 25px);
}

textarea
{
 width:400px;
  max-width:400px;
 height:150px;
 line-height:150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus
{
 border-color: #c9c9c9;
 -moz-box-shadow: rgba(0,0,0,0.15) 0 0 8px;
}

form label
{
 margin-left: 10px;
 color:#999999;
}

input[type=submit]
{
 padding:9px 15px;
 width:75px;
 cursor:pointer;
 background: #617798;
 border:0;
 font-size:14px;
 color:white;
 -moz-border-radius:5px;
}

Preview

Name

Email


Website