Форма входа для uCoz от Madeas studio - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Современно создана форма входа для сайтаuCoz на любую тематику, где по такому же принципу идет работа, только дизайн отличается. Лучше всего подойдет для сайтов с локальной авторизацией и где используется старая форма входа. Вы можете эту форму установить как на светлый по стилистике интернет ресурс, но и безусловно на темный отличное решение будет.

Для начала нам необходимо установить шрифт FontAwesome. Подробную информацию по установке и настройке вы найдете здесь.

Первое что мы сделаем, это зайдем в ПУ - Форма входа пользователей и заменим всё её содержимое вот на этот код:

Код


<?if($PAGE_ID$="login")?><div style="width:80%;"><?endif?>  
<table border="0" cellspacing="1" cellpadding="0" width="100%">  
<?if($ERROR$)?><td colspan="5" style="color:red;text-align:center;">$ERROR$</td><?endif?>  
<tr>  
  <td width="35%" class="label" nowrap="nowrap"><i class="fa fa-user" aria-hidden="true"></i> Логин</td>  
  <td width="10%" > </td>  
  <td width="35%" class="label"><i class="fa fa-unlock" aria-hidden="true"></i> Пароль</td>  
  </tr>  
<tr>  
  <td><input class="loginField" type="text" name="user" value="" size="20" style="width:230px" maxlength="50"/><i class="fa fa-fw fa-pencil icon--msst"></i></td>  
  <td> </td>  
  <td><input class="loginField" type="password" name="password" size="20" style="width:230px" maxlength="15"/><i class="fa fa-fw fa-pencil icon--msst"></i></td>  
  </tr>  
</table>  
<table border="0" cellspacing="1" cellpadding="0" width="100%">  
<tr>  
  <td nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?>
  
  <input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></td>  
  <td align="right" valign="center"><input class="loginButton" name="sbm" type="submit" value="Вход"/></td></tr>  
<tr>  
  <td colspan="2"><div style="font-size:7pt;text-align:center;"><a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a></div></td></tr>  
</table>  
<?if($PAGE_ID$="login")?></div><?endif?>

Далее поднимаемся выше на Страницу входа пользователей.
Находим там код:

Код
<div align="center">


$BODY$





</div>

и заменяем его на:

Код
<div align="center" class="ms-form">


$BODY$





</div>

Теперь добавляем немного CSS анимации и стилизуем всё вот таким образом:

Код


.ms-form form .label {font-size:16px;}  
.ms-form form inputtype=text,  
.ms-form form inputtype=password {  
  background-color:transparent!important;  
  border-bottom:2px solid #ccc!important;  
  -webkit-transform: translate3d(0, 50px, 0);  
  transform: translate3d(0, 50px, 0);  
  -webkit-transition: -webkit-transform 0.3s;  
  transition: transform 0.3s;  
  -webkit-transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);  
  transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);  
  }  
.ms-form form inputtype=text:focus,  
.ms-form form inputtype=password:focus,  
.ms-form form inputtype=text:hover,  
.ms-form form inputtype=password:hover {  
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);  
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);  
  }  
.icon--msst {  
  position: relative;  
  bottom: 16px;  
  font-size: 1em;  
  opacity: 0.9;  
  float: right;  
  color: #fff;  
  pointer-events: none;  
}  
.ms-form form inputtype=text:focus:focus + .icon--msst,  
.ms-form form inputtype=password:focus + .icon--msst {  
  pointer-events: none;  
  -webkit-transform: translate3d(-238px, 0, 0) rotate3d(0, 0, 1, -90deg);  
  transform: translate3d(-238px, 0, 0) rotate3d(0, 0, 1, -90deg);  
  -webkit-transition: -webkit-transform 0.3s ;  
  transition: transform 0.3s;  
}

Важно!

При копировании материала указывать ссылку на источник.

- 424
- 27-Января-2017
- 0
- 0
Материал разместил:

Похожий материал
Статьи сайта