Главная » 2012 » Ноябрь » 7 » Почтовые Формы в стиле почтовых конвертов (Javascript)
07.11.2012, 21:45

Почтовые Формы в стиле почтовых конвертов




Стильный вид Почтовой формы, напоминающий почтовый конверт. Данный материал НЕ предназначен для UCoz, но вполне можно подогнать стили под UCoz'овский модуль "Почтовые формы".
Установка:
1. Залейте изображения к себе на сайт в папку images
2. HTML код вставьте туда, где должна быть форма:
Code

<div id="container">
<h1>Send a Letter</h1>

<form action="" method="post">
  <fieldset>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" id="send" value="Send" />

  </fieldset>
</form>
</div>

3. CSS:
Code

h1 {
  font-size: 30px;
  text-align: center; letter-spacing: 5px;
  margin: 0 0 44px 0;
}
#container {
  width: 560px; margin: 100px auto; padding: 51px 0 0 0;
  background: url(/images/lines.png); position: relative;
}
  #container:before {
  content: ""; width: 19px; height: 365px; position: absolute; left: -19px; top: 0;
  background: url(/images/shadow.png);  
  }

label {
  width: 150px; display: block;
  text-align: right; float: left;
  font-size: 18px; letter-spacing: 3px;
  margin: 0 10px 40px 0; clear: left;
}

input {
  width: 300px; height: 40px; float: left; margin: -14px 0 0 0;
  background: url(/images/dots.png);  
  font-family: 'Shadows Into Light', cursive;
  font-size: 24px; color: #18326d; letter-spacing: 3px;
}

textarea {
  width: 300px; height: 200px; float: left; margin: -14px 0 40px 0;
  background: url(/images/dots.png);  
  font-family: 'Shadows Into Light', cursive;
  font-size: 24px; color: #18326d; letter-spacing: 3px;
}

input#send {
  width: 202px; height: 84px; float: right;
  margin: 0 70px 36px 0; padding: 0 0 0 77px;
  background: url(/images/post-mark.png);
  font: bold 30px Helvetica, Sans-Serif; text-transform: uppercase; color: #525c73;
  cursor: pointer;
   
}

Перевед на русский by sold93 для InfoScript.ru
Материал взят с сайта infoscript.ru
Теги: Скачать Почтовые Формы в стиле почтовых конвертов
Скачать "Почтовые Формы в стиле почтовых конвертов"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: htmldrive.net
Категория: JavaScript's | Просмотров: 2188 | Добавил: sold93 | Рейтинг: 4.0/1 |
Теги: формы, Почтовые, конверто, почтовых, стиле
Всего комментариев: 2
0  
1 sold93 -Infoscript Team-  (07.11.2012 21:46) [Материал]
Аватар пользователя
shy хотел для юкозла адаптировать, но сайт полетел

0  
2 InfoDusha -Infoscript Team-  (10.11.2012 12:58) [Материал]
Аватар пользователя
я могу помочь... попробуем? happy

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]