Comment Form

CSS3 comment form.

by erick

HTML

<!DOCTYPE html> 
<head> 
<title>CSS3 Form Demo</title> 
</head> 
<body>
<form class="form">
  <p class="name">
    <input type="text" name="name" id="name" />
    <label for="name">Name</label>
  </p>

  <p class="email">
    <input type="text" name="email" id="email" />
    <label for="email">E-mail</label>
  </p>

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

  <p class="text">
    <textarea name="text"></textarea>
  </p>

  <a href="#" class="button black">Submit</a>
</form>

</body>
</html>

CSS

body {padding:0px 100px; font:13px/150% Verdana, Tahoma, sans-serif;}

form {width:780px;margin:20px auto;}
input, textarea { 
  padding: 9px;
  border: solid 1px #E5E5E5;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  background: #FFFFFF url('bg_form.png') left top repeat-x;
  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  margin-bottom:10px;
}

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

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

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

.submit input {
  width: auto;
  padding: 9px 15px;
  background: #617798;
  border: 0;
  font-size: 14px;
  color: #FFFFFF;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: pointer;
}

div {width:800px;margin:0px auto;}
h1 {padding:10px;border-bottom:1px dotted #ccc;text-transform:uppercase;letter-spacing:2px;font-weight:100;}
p {line-height:1.5em;}

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px...