Форма обратной связи CSS3
by Andrey Dobrovoi
HTML
<form>
<input name="name" placeholder="Укажите ваше имя!" class="name" required />
<input name="emailaddress" placeholder="Укажите ваш Email!" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="Отправить" />
</form>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
body {
background:#002F63;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:100px;
}
/* Базовый стиль формы */
form {
margin-left:auto;
margin-right:auto;
width: 343px;
padding: 30px 30px 10px 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
/* Поле сообщения */
textarea{
background: rgba(255, 255, 255, 0.4);
width: 276px;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Open Sans', sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:45px;
padding-right:20px;
padding-top:12px;
margin-bottom:20px;
overflow:hidden;
}
/* Поля ввода */
input {
width: 276px;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Open Sans', sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:20px;
padding-right:20px;
margin-bottom:20px;
}
input[type=submit] {
cursor:pointer;
}
input.name {
background:...