регистрация
856материалов
3290комментариев
235тем на форуме
6858пользователей

Login Form by 'Madeas studio'


Описание:

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

HTML разметка:

Первое что мы сделаем, это зайдем в ПУ - Форма входа пользователей и заменим всё её содержимое вот на этот код:
Код
<?if($PAGE_ID$="login")?><div style="width:500px;"><?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?>
Сохраняем и закрываем. На самом деле это стандартный код, который мы слегка изменили и добавили несколько классов и иконок =)


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

Скорее всего в шаблоне вы увидите вот такой код:
Код
<!-- <body> --><div align="center"><br /><br /><br />$BODY$<br /><br /><br /><br /><br /><br /></div><!-- </body> -->
Нам необходимо вставить в неё класс .ms-form для того, чтобы новые стили не распространялись на все формы, которые могут находиться на этой странице. Например, в футере может быть форма входа в виде аякс окна.

Выглядеть это будет таким образом:
Код
<div align="center" class="ms-form"><br /><br /><br />$BODY$<br /><br /><br /><br /><br /><br /></div>

CSS часть:

Для начала давайте стилизуем наш inputtype=checkbox :
Код
.ms-form form inputtype="checkbox",           
.ms-form form .noun{display: none}
.ms-form form inputtype="checkbox" + label {
           display: block;
           position: relative;
           padding-left: 20px;
           margin-bottom: -10px;
           font: 14px/20px 'Open Sans', Arial, sans-serif;
           cursor: pointer;
           -webkit-user-select: none;
           -moz-user-select: none;
           -ms-user-select: none;
}
.ms-form form inputtype="checkbox" + label:last-child { margin-bottom: 0; }
.ms-form form inputtype="checkbox" + label:before {
           content: '';
           display: block;
           width: 13px;
           height: 13px;
           border: 2px solid #fff;
           position: absolute;
           left: 0;
           top: 0;
           opacity: .6;
           -webkit-transition: all .16s, border-color .12s;
           transition: all .16s, border-color .12s;
}           
.ms-form form inputtype="checkbox":checked + label:before {
           width: 5px;
           top: -2px;
           left: 2px;
           border-radius: 0;
           opacity: 1;
           border-top-color: transparent;
           border-left-color: transparent;
           -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
}Теперь наш [b]checkbox в активном состоянии [b]будет выглядеть как галочка. Идём дальше.
На самом деле ничего замороченного здесь нет, мы просто немного изменим стандартный вид формы и добавим анимацию:
.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);
           }

Мы убрали стандартный фон в полях input и добавили нижний бордюр. Теперь добавим эффект при наведении:
Код
.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);
           }

Здесь всё! У нас еще остался карандашик, за который отвечает шрифт FontAwesome и класс .icon--msst .
Код
.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;
}

Добавим снова легкую анимацию и, теперь наш карандаш будет плавно передвигаться к началу поля input.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 01.02.2017 в 09:00
Материал просмотрен: 1091 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 4
Пользователей: 0