Контактная форма для сайта на CSS3

В редакторе

Контактная форма для сайта на CSS3

Brain_Script
968
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; }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика