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

Компактная форма входа серебряного цвета

09.08.2012 17:04

DEMOКомпактная форма входа серебряного цвета

Ну что же, приступим к установке ?
Для начала можно посмотреть демонстрацию, а вот теперь давай посмотрим на код CSS:
Code

#logform{
  width:260px;
  border:none;
  background:none;
}
input#lognamepass{
  color:#666;
  margin-top:3px!important;
  font-size:14px!important;
  width:255px!important;
  padding:5px;
  float:left!important;
  box-shadow: 0 0 5px #ccc;
  -mox-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  border:1px solid #eee;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: -webkit-linear-gradient(top, #ccc, #fff)!important;
  background: -moz-linear-gradient(top, #ccc, #fff)!important;
  background: -ms-linear-gradient(top, #ccc, #fff)!important;
  background: -o-linear-gradient(top, #ccc, #fff)!important;
}
input#logbutton{
  color:#666;
  font-size:14px!important;
  float:left!important;
  margin-top:3px!important;
  width:255px!important;
  cursor:pointer;
  padding:5px 0 5px 0;
  text-align:center;
  display:inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border:none!important;
  background: -webkit-linear-gradient(top, #ccc, #fff)!important;
  background: -moz-linear-gradient(top, #ccc, #fff)!important;
  background: -ms-linear-gradient(top, #ccc, #fff)!important;
  background: -o-linear-gradient(top, #ccc, #fff)!important;
  box-shadow: 0 0 5px #999;
  -mox-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
}
input#logbutton:hover{
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border:none!important;
  -webkit-box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important;
  -moz-box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important;
  box-shadow: 0 0px 2px rgba(0,0,0,0.25), inset 0 0 3px #666!important;
}
input#lognamepass:focus{
  border:1px solid #999;
  box-shadow: 0 0 5px #999;
  -mox-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
  background: -webkit-linear-gradient(top, #fff, #eee)!important;
  background: -moz-linear-gradient(top, #fff, #eee)!important;
  background: -ms-linear-gradient(top, #fff, #eee)!important;
  background: -o-linear-gradient(top, #fff, #eee)!important;
}

Если нужно поменять размеры(для тех кто не знает как и что.) нужно изменить: 260px на свои значения.
Теперь нужно зайти в управление дизайном и найти "Форма входа пользователей"
И заменить там все этим кодом:
Code

<div id="logform">
<input id="lognamepass" type="text" name="user" value="Логин/E-mail" onblur="if(this.value=='') this.value='Логин/E-mail';" onfocus="if(this.value=='Логин/E-mail') this.value='';"/>
<div style="clear:both;"></div>
<input id="lognamepass" type="password" name="password" value="**********" onblur="if(this.value=='') this.value='**********';" onfocus="if(this.value=='**********') this.value='';"/>
<div style="clear:both;"></div>
<input id="logbutton" name="sbm" type="submit" value="Войти" />
</div>

Теперь сохраняем и смотрим на результат.
И еще хочу сказать о условных операторах этой формы.
$LOGIN_FORM$ это - именно то что мы изменяем.(нужно ставить там где хотим видеть эту форму)
$LOG_FORM$ а это - стандартная форма входа, ее нельзя изменять, тем более мы используем красивую форму входа - зачем нужна стандартная ? smile

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

Теги: форма входа, CSS3, форма входа ucoz, jQuery, js, форма входа для ucoz, красивая форма входа

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Август 2012  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031
Оценка сайта
Всего ответов: 336

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

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

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