WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

Простенькая форма входа

27.01.2013 03:34

DEMOПростенькая форма входа

Простенькая форма входа для юкоз, в которой всего два поля и кнопка входа.
Остальные функции я не стал вставлять, так как все равно никто ими не пользуется.


Заходим в управлении дизайном в Форма входа
И заменяем там все на этот код:
Код

<div class="form-container">
<div class="form-title"><h2>Вход</h2></div>
<div class="form-title">E-mail</div>
<input class="form-field" type="text" name="user" placeholder="Ваш email адрес" required/>

<div class="form-title">Пароль</div>
<input class="form-field" type="password" name="password" placeholder="Пароль" required/>

<div class="submit-container">
<input class="submit-button" type="submit" value="Войти" name="sbm"/>
</div>
</div>


Теперь добавляем стилизацию для формы
Ставим код CSS в ваш файл стилей:
Код

  .form-container {
  border: 1px solid #ddd;
  background: #ebebeb;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb));
  background: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background: -moz-linear-gradient(top, #ffffff, #ebebeb);
  background: -ms-linear-gradient(top, #ffffff, #ebebeb);
  background: -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  -moz-box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  box-shadow: rgba(000,000,000,0.4) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  font-family: 'Helvetica Neue',Helvetica,sans-serif;
  text-decoration: none;
  vertical-align: middle;
  min-width:300px;
  padding:20px;
  width:300px;
  }
.form-field {
  border: 1px solid #adadad!important;
  background: #f0f0f0!important;
  -webkit-border-radius: 3px!important;
  -moz-border-radius: 3px!important;
  border-radius: 3px!important;
  color: #5e5e5e!important;
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important;
  -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important;
  box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px!important;
  padding:8px!important;
  margin-bottom:20px!important;
  width:300px!important;
  }
.form-field:focus {
  background: #fff!important;
  color: #454545!important;
  }
.form-container h2 {
  text-shadow: #ffffff 0 1px 0;
  font-size:18px;
  margin: 0 0 10px 0;
  font-weight:bold;
  text-align:center;
  }
.form-title {
  margin-bottom:10px;
  }
.submit-container {
  margin:8px 0;
  text-align:right;
  }
.submit-button {
  border: 1px solid #adadad!important;
  background: #d9dbd7!important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#d9dbd7))!important;
  background: -webkit-linear-gradient(top, #f0f0f0, #d9dbd7)!important;
  background: -moz-linear-gradient(top, #f0f0f0, #d9dbd7)!important;
  background: -ms-linear-gradient(top, #f0f0f0, #d9dbd7)!important;
  background: -o-linear-gradient(top, #f0f0f0, #d9dbd7)!important;
  background-image: -ms-linear-gradient(top, #f0f0f0 0%, #d9dbd7 100%)!important;
  -webkit-border-radius: 4px!important;
  -moz-border-radius: 4px!important;
  border-radius: 4px!important;
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important;
  -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important;
  box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0!important;
  text-shadow: #c4c4c4 0 1px 0!important;
  color: #454545!important;
  font-family: helvetica, serif!important;
  padding: 8.5px 18px!important;
  font-size: 14px!important;
  text-decoration: none!important;
  vertical-align: middle!important;
  }
.submit-button:hover {
  border: 1px solid #bababa!important;
  text-shadow: #c9ccc6 0 1px 0!important;
  background: #dbdbdb!important;
  background: -webkit-gradient(linear, left top, left bottom, from(#f4f5f2), to(#dbdbdb))!important;
  background: -webkit-linear-gradient(top, #f4f5f2, #dbdbdb)!important;
  background: -moz-linear-gradient(top, #f4f5f2, #dbdbdb)!important;
  background: -ms-linear-gradient(top, #f4f5f2, #dbdbdb)!important;
  background: -o-linear-gradient(top, #f4f5f2, #dbdbdb)!important;
  background-image: -ms-linear-gradient(top, #f4f5f2 0%, #dbdbdb 100%)!important;
  color: #a3a3a3!important;
  }
.submit-button:active {
  text-shadow: #bababa 0 1px 0!important;
  border: 1px solid #b9bab8!important;
  background: #989997!important;
  background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), to(#dbdbdb))!important;
  background: -webkit-linear-gradient(top, #a1a1a1, #989997)!important;
  background: -moz-linear-gradient(top, #a1a1a1, #989997)!important;
  background: -ms-linear-gradient(top, #a1a1a1, #989997)!important;
  background: -o-linear-gradient(top, #a1a1a1, #989997)!important;
  background-image: -ms-linear-gradient(top, #a1a1a1 0%, #989997 100%)!important;
  color: #1f1f1f!important;
  }
.form-title h2 {
  font-size:18px!important;
  color: #666;
  text-shadow: #eee 0 1px 0;
  margin:0px;
  padding: 10px 10px;
}


Все! Форма входа готова.

Категория: Формы входа | Просмотров: 972 | Добавил: Cradleshel

Теги: форма входа ucoz, форма входа, Login form

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Январь 2013  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031
Какой категории уделить больше внимания?
Всего ответов: 251

Полезная информация

Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px