» »

Форма входа для uCoz от Madeas studio

Форма входа для uCoz от Madeas studio

Современно создана форма входа для сайта 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$)?><br />  
  <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"><br /><br /><br />$BODY$<br /><br /><br /><br /><br /><br /></div>


и заменяем его на:
Код
<div align="center" class="ms-form"><br /><br /><br />$BODY$<br /><br /><br /><br /><br /><br /></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;  
}  


Готово!

Демонстрация материала
26.01.2017 Загрузок: 5 Просмотров: 649 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Kosten
Kosten 26.01.2017 15:371
0
Здесь же нужны шрифтовые иконки иконки?
iMadeas
iMadeas 26.01.2017 15:462
0
Да, я сразу добавил ссылку в описание 09a
Kosten
Kosten 26.01.2017 15:583
0
В комментариях тоже не помешает.
iMadeas
iMadeas 26.01.2017 17:034
0
Что-то тут опять навертели, всё описание сбилось... Было же нормально написано. Не пойму, зачем переделывать нормально написанное описание на не грамотную белеберду?
Kosten
Kosten 26.01.2017 18:565
0
Мы с вами договаривались писать оригинально а не копировать!
Kosten
Kosten 26.01.2017 18:576
0
Ссылку убрал с комментариев.. по этому поводу отписал в ЛС.
Tergran
Tergran 27.01.2017 02:027
0
Демо не работает, исправите плизз.
Kosten
Kosten 27.01.2017 02:068
0
Не знаю, на этом сайте где то есть вход на сайт, но на его демонстрация шла.
Сайт: koa.usite.pro
Kosten
Kosten 27.01.2017 02:109
0
Посмотреть можно визуально и попробовать зайти на сайт и вообще как работает такая форма на сайте, вообщем ЗДЕСЬ рабочий вариант.

Советник
Советник 27.01.2017 02:1610
0
Хороший вариант, нужно попробовать, смотрится и работает хорошо.
1 2 »
avatar