Контактная форма для сайта на CSS3
В редакторе
Контактная форма для сайта на CSS3
Brain_Script
1037
2019-07-12 15:01:08
<div id="sentralnaya_korobka">
<form action="#" id="form">
<label for="name">Название</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="text" id="email" />
<label for="telephone">Телефон</label>
<input type="text" id="telephone" />
<label for="message">Сообщение</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Отправить" name="submit" id="submit" />
</form>
</div>
#sentralnaya_korobka {
font-family: verdana;
margin: 28px auto;
padding: 28px;
background: #3b4c56;
font-size: 14px;
width: 100%;
max-width: 512px;
box-sizing: border-box;
border: 2px solid #cec9c9;
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(123, 119, 119, 0.31), 1px 5px 15px 5px rgba(14, 14, 14, 0);
}
label {
display: block;
font-size: 23px;
padding: 14px 0;
color: #f6f9fb;
text-shadow: 1px 1px 1px #545050;
}
input {
height: 17px;
padding: 20px;
width: 100%;
box-sizing: border-box;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 8px #7b7676;
-moz-box-shadow: 0 0 8px #7b7676;
box-shadow: 0 0 8px #7b7676;
border: 1px solid #eeeeef;
}
textarea {
height: 150px;
width: 100%;
box-sizing: border-box;
padding: 14px;
border: 1px solid #eeeeef;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 8px #847c7c;
-moz-box-shadow: 0 0 8px #847c7c;
box-shadow: 0 0 8px #847c7c;
}
input[type="text"]:hover, textarea:hover {
border: 1px solid #fff;
-webkit-box-shadow: 0 0 20px rgba(12, 12, 12, 0.25) inset, 0 0 5px rgba(249, 246, 246, 0.4);
-moz-box-shadow: 0 0 20px rgba(12, 12, 12, 0.25) inset, 0 0 5px rgba(249, 246, 246, 0.4);
box-shadow: 0 0 20px rgba(12, 12, 12, 0.25) inset, 0 0 5px rgba(249, 246, 246, 0.4);
}
input#submit {
text-align: center;
color: #f5efef;
height: 50px;
padding: 0;
text-shadow: 1px 1px 1px #151414;
font-size: 17px;
text-transform: uppercase;
margin-top: 50px;
border: 1px solid #868383;
background: #353333;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #403b3b), color-stop(100%, #2d2929));
background: -webkit-linear-gradient(top, #868181 0%,#151414 100%);
background: -moz-linear-gradient(top, #151414 0%,#151414 100%);
background: -o-linear-gradient(top, #151414 0%,#151414 100%);
background: -ms-linear-gradient(top, #151414 0%,#151414 100%);
background: linear-gradient(top, #3b3b3b 0%,#151414 100%);
opacity: 0.7;
}
input#submit:hover {
color: #ccc;
cursor: pointer;
opacity: 0.8;
}
label {
text-transform: uppercase;
font-size: 14px;
}
Войдите для добавления комментария.