В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в Futurico UI Pro , созданном Владимиром Кудиновым. Для создания формы мы будем использовать CSS3 и jQuery.
Шаг 1 - HTML-разметкаНачнем с создания HTML-разметки. Создадим форму с четырьмя input-ами (имя пользователя, пароль, чекбокс и кпонка "submit") флажок мы обернем в тег span, который мы будем использовать для стилизации этого флажка. Затем обернем форму и заголовок в тег DIV и назначим ему класс "login-form".
Login Form
remember
Сначала удалим все поля, отступы, границы и т.д. из элементов, которые мы будем использовать.
Login-form,
.login-form
h1,
.login-form
span,
.login-form
input,
.login-form
label {
margin
:
0
;
padding
:
0
;
border
:
0
;
outline
:
0
;
}
Затем зададим стили для контейнера формы. Мы добавим относительное позиционирование, фиксированную ширину и высоту, цвет фона, закругленные углы и тени.
Login-form
{
position
:
relative
;
width
:
200px
;
height
:
200px
;
padding
:
15px
25px
0
25px
;
margin-top
:
15px
;
cursor
:
default
;
background-color : #141517 ;
Webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
Webkit-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
-moz-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.2)
,
inset
0px
1px
1px
0px
rgb
(0
,
0
,
0
)
;
}
Чтобы создать стрелку, мы будем использовать селектор :before .
Login-form
:before
{
position
:
absolute
;
top
:
-12px
;
left
:
10px
;
width
:
0px
;
height
:
0px
;
content
:
""
;
border-bottom
:
10px
solid
#141517
;
border-right
:
10px
solid
#141517
;
border-top
:
10px
solid
transparent
;
border-left
:
10px
solid
transparent
;
}
Добавим некоторые стили для заголовка формы (цвет, шрифт и размер, и т.д.).
Login-form
h1 {
line-height
:
40px
;
font-family
:
"Myriad Pro"
,
sans-serif
;
font-size
:
22px
;
font-weight
:
normal
;
color
:
#e4e4e4
;
}
Сначала зададим основные стили для input-ов.
line-height
:
14px
;
margin
:
10px
0
;
padding
:
6px
15px
;
border
:
0
;
outline
:
none
;
font-family
:
Helvetica,
sans-serif
;
font-size
:
12px
;
font-weight
:
bold
;
text-shadow
:
0px
1px
1px
rgba(255
,
255
,
255
,
.2)
;
Webkit-border-radius:
26px
;
-moz-border-radius:
26px
;
border-radius:
26px
;
Webkit-transition:
all .15s ease-in-out;
-moz-transition:
all .15s ease-in-out;
-o-transition:
all .15s ease-in-out;
transition:
all .15s ease-in-out;
}
Затем мы зададим стили для полей ввода логина и пароля. Мы добавим градиентный серый фон и тени. Мы также добавим фиксированную ширину, равную 170px, и цвет для текста.
Login-form
input[
type=
text
]
,
.login-form
input[
type=
password]
,
.js
.login-form
span {
color
:
#686868
;
width
:
170px
;
Webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
;
background
:
#989898
;
background
:
-moz-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#ffffff
)
,
color-stop(100%
,
#989898
)
)
;
background
:
-webkit-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-o-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
-ms-linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
background
:
linear-gradient(top
,
#ffffff
0%
,
#989898
100%
)
;
}
При наведении курсора мыши на эти поля мы будем изменять их тени.
Login-form
input[
type=
text
]
:hover
,
.login-form
input[
type=
password]
:hover
{
-webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.6)
,
0px
0px
5px
rgba(255
,
255
,
255
,
.5)
;
}
Для активного состояния мы изменим CSS3 градиент на немного более светлый
Login-form
input[
type=
text
]
:focus
,
.login-form
input[
type=
password]
:focus
{
background
:
#e1e1e1
;
background
:
-moz-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#ffffff
)
,
color-stop(100%
,
#e1e1e1
)
)
;
background
:
-webkit-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-o-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
-ms-linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
background
:
linear-gradient(top
,
#ffffff
0%
,
#e1e1e1
100%
)
;
}
Расположим кнопку справа, для этого зададим ей float:right.
Login-form
input[
type=
submit]
{
float
:
right
;
cursor
:
pointer
;
color : #445b0f ;
Webkit-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
-moz-box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
box-shadow:
inset
1px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
}
При наведении мыши изменим тени, а в активном состоянии - удалим их.
Login-form
input[
type=
submit]
:hover
{
-webkit-box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
-moz-box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
box-shadow:
inset
1px
1px
3px
0px
rgba(255
,
255
,
255
,
.8)
,
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.6)
;
}
Login-form
input[
type=
submit]
:active
{
-webkit-box-shadow:
none
;
-moz-box-shadow:
none
;
box-shadow:
none
;
}
Добавим зеленый градиент для кнопки.
Login-form
input[
type=
submit]
,
.js
.login-form
span.checked
:before
{
background
:
#a5cd4e
;
background
:
-moz-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-webkit-gradient(linear,
left
top
,
left
bottom
,
color-stop(0%
,
#a5cd4e
)
,
color-stop(100%
,
#6b8f1a
)
)
;
background
:
-webkit-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-o-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
-ms-linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
background
:
linear-gradient(top
,
#a5cd4e
0%
,
#6b8f1a
100%
)
;
}
Теперь начинается самая трудная часть, потому что мы не можем изменять вид флажков с помощью CSS, так, как мы изменяли вид других полей формы.
Самый простой способ, который я нашел, это заменить флажок тегом span.
Это будет работать следующим образом: сначала мы спрячем флажок и зададим такие стили для тега span, чтобы он выглядел как флажок, а затем мы будем обновлять этот флажок (отмечен/не отмечен) с помощью jQuery.
Поскольку у некоторых пользователей отключен JavaScript, нужно добавить резервный вариант. Для этого мы будем добавлять "js" класс в тег body при помощи jQuery. Таким образом, если JavaScript будет включен, класс "js" будет добавлен к тегу body при загрузки страницы, а если JavaScript отключен, то класс не будет добавлен. Так что только пользователи с поддержкой JavaScript будут видеть стилизованный флажок.
Сначала мы спрячем флажок.
.js
.login-form
input[
type=
checkbox]
{
position
:
fixed
;
left
:
-9999px
;
}
Затем мы разместим в нужном нам месте тег span.
.login-form
span {
position
:
relative
;
margin-top
:
15px
;
float
:
left
;
}
Затем добавим некоторые стили для тега span (ширину, высоту, границу и др.).
.js
.login-form
span {
width
:
16px
;
height
:
16px
;
cursor
:
pointer
;
Webkit-border-radius:
2px
;
-moz-border-radius:
2px
;
border-radius:
2px
;
}
Чтобы создать состояние "checked", в span мы вставим маленький квадрат и поместим его в центре.
.js
.login-form
span.checked
:before
{
content
:
""
;
position
:
absolute
;
top
:
4px
;
left
:
4px
;
width
:
8px
;
height
:
8px
;
Webkit-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
-moz-box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
box-shadow:
0px
1px
1px
0px
rgba(255
,
255
,
255
,
.45)
,
inset
0px
1px
1px
0px
rgba(0
,
0
,
0
,
.3)
;
}
Тег label мы разместим справа от флажка и добавим некоторые основные стили (шрифт, цвет и т.д.).
.login-form
label {
position
:
absolute
;
top
:
1px
;
left
:
25px
;
font-family
:
sans-serif
;
font-weight
:
bold
;
font-size
:
12px
;
color
:
#e4e4e4
;
}
Все стили, которые имеют класс "js" в начале, будут применяться только если включена поддержка JavaScript.
Сначала мы подключим последнюю версию библиотеки jQuery, используя Google API, если вы хотите, вы можете разместить её на своем собственном сервере, это ваш выбор. Затем добавьте следующий код в нижней части HTML-файла, перед закрывающим тегом .
<
script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
>
<
script>
$(document)
.ready
(function
()
{
// Check if JavaScript is enabled
$("body"
)
.addClass
("js"
)
;
// Make the checkbox checked on load
$(".login-form span"
)
.addClass
("checked"
)
.children
("input"
)
.attr
("checked"
,
true
)
;
// Click function
$(".login-form span"
)
.on
("click"
,
function
()
{
if
($(this
)
.children
("input"
)
.attr
("checked"
)
)
{
$(this
)
.children
("input"
)
.attr
("checked"
,
false
)
;
$(this
)
.removeClass
("checked"
)
;
}
else
{
$(this
)
.children
("input"
)
.attr
("checked"
,
true
)
;
$(this
)
.addClass
("checked"
)
;
}
}
)
;
}
)
;
Вначале мы добавим класс "js" в тег body.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Если вам необходимо сделать один из разделов своего сайта доступным ограниченному, но неопределенному кругу лиц, проще всего это сделать с помощью регистрации и авторизации пользователей. Есть множество способов авторизации пользователей. Можно использовать как инструменты веб-сервера, так и инструменты языка программирования. Мы поговорим о случае, когда используются сессии PHP .
Вероятно, вы хотели бы увидеть более современный способ создания такой формы. Полное его современное и актуальное представление у меня пока что еще в планах, но зато вы можете увидеть, что форму обратной связи можно построить с помощью объектно-ориентированных приемов в PHP.
Для начала давайте оговорим все шаги, которые сделаем далее. Что нам вообще нужно? Нам нужен сценарий, который будет регистрировать пользователя, авторизовать пользователя, переадресовывать пользователя куда-либо после авторизации. Также нам нужно будет создать страницу, которая будет защищена от доступа неавторизованных пользователей. Для регистрации и авторизации нам необходимо будет создать HTML -формы. Информацию о зарегистрированных пользователях мы будем хранить в базе данных. Это значит, что нам еще нужен скрипт подключения к СУБД . Всю работу у нас будут выполнять функции, которые мы сами напишем. Эти функции мы сохраним в отдельный файл.
Итак, нам нужны следующие файлы:
- соединение с СУБД;
- пользовательские функции;
- авторизация;
- регистрация;
- защищенная страница;
- сценарий завершения работы пользователя;
- сценарий, проверяющий статус авторизации пользователя;
- таблица стилей для простейшего оформления наших страниц.
Всё это будет бессмысленно, если у вас нет соответствующей таблицы в базе данных. Запустите инструмент управления своим СУБД (PhpMyAdmin или командную строку, как удобнее) и выполните в нем следующий запрос:
CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `password` char(40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Наши файлы со сценариями я назову так (все они будут лежать в одном каталоге):
- database.php;
- functions.php;
- login.php;
- registration.php;
- index.php;
- logout.php;
- checkAuth.php;
- style.css.
Назначение каждого из них, я уверен, вам понятно. Начнем со скрипта соединения с СУБД. Вы его уже видели . Просто сохраните код этого скрипта в файле с именем database.php . Пользовательские функции мы будем объявлять в файле functions.php . Как это всё будет работать? Неавторизованный пользователь пытается получить доступ к защищенному документу index.php , система проверяет авторизован ли пользователь, если пользователь не авторизован, он переадресовывается на страницу авторизации. На странице авторизации пользователь должен видеть форму авторизации. Давайте сделаем её.
Авторизация пользователей Ваш логин: Ваш пароль:
зарегистрируйтесь.
Теперь нашей форме нужно придать некий вид. Заодно определим правила для других элементов. Я, забегая вперед, приведу содержимое таблицы стилей полностью.
/* файл style.css */ .row { margin-bottom:10px; width:220px; } .row label { display:block; font-weight:bold; } .row input.text { font-size:1.2em; padding:2px 5px; } .to_reg { font-size:0.9em; } .instruction { font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; } .error { color:red; margin-left:3px; }
Если всё сделано верно, у вас в броузере должно быть следующее:
Конечно же у нас нет пока ни одного зарегистрированного пользователя, и чтобы авторизоваться, нужно зарегистрироваться. Давайте сделаем форму регистрации.
Регистрация пользователей Укажите ваш логин: Регистрация пользователей Укажите ваш логин:
В первой строке включается библиотека jQuery из CDN Google. Затем следует заплатка для IE6 PNG для элементов прозрачности. Затем включается скрипт панели
Переменная $script показывает панель на странице загрузки при необходимости.
Адаптивное c функциями форм входа и регистрации, с возможностью динамичного переключения, без перезагрузки страницы. После появления окна, пользователь может легко переключаться из одной в другую, и при необходимости, выбрать опцию изменения пароля.
Сегодня мы рассмотрим как всё это можно реализовать с помощью связки небольшого, но очень функционального плагина jQuery и новых стандартов CSS3.
Данный метод будет полезен, если вы захотите сделать так, чтобы формы входа и регистрации были доступны для пользователей на каждой странице вашего сайта. При входе на сайт или регистрации, пользователи не будут перенаправлены на другую страницу, и смогут выполнять все необходимые действия «не отходя от кассы», всё на одной странице.
Оформление внешнего вида всплывающих форм реализовано с помощью CSS3, общий вес плагина совсем не большой, отклик и загрузка модального окна, происходит практически без задержек.
Стопроцентно адаптивный макет, высота и ширина модального окна с формами, автоматически устанавливаются в соответствии с размерами экранов пользовательских устройств.
Пример посмотрели, теперь давайте, разберём в деталях все основные компоненты модального окна и форм, для того что бы научиться использовать их у себя на сайте.
Работа всплывающего окна с формами входа и регистрации, выстроена на популярной библиотеке javascript, исполняемом плагине jQuey и сформированных стилях CSS. Все эти инструменты необходимо подключить к вашему сайту. Последнюю актуальную версию библиотеки jQuey можно подключить напрямую с Google, сам файл плагина main.js и готовый набор сформированных стилей style.css найдёте в архиве.
Javascript прописываем перед закрывающим тегом , стили CSS можно скопировать и добавить в файл стилей.css вашего сайта.
HTML Структура:
Базовый контейнер модальных окон на затемнённом фоне и встроенные формы с элементами управления, размещаем в теле страницы. Для большего понимания, разграничил сектора и добавил комментарии. Все элементы конструкции, прочно связаны с CSS через определённые классы, так что изменить дизайн форм в соответствии с общим дизайном ваших сайтов, не составит особого труда.
| < div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" > Вход < li>< a href= "#0" > Регистрация < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" > E- mail < input class = id= "signin-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" > Пароль < input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" > Запомнить меня < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Войти" > < p class = "cd-form-bottom-message" >< a href= "#0" > Забыли свой пароль? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" > Имя пользователя < input class = "full-width has-padding has-border" id= "signup-username" type= "text" placeholder= "Имя пользователя" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" > E- mail < input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" > Пароль < input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" > Я согласен с < a href= "#0" > Условиями < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Создать аккаунт" > < div id= "cd-reset-password" > < p class = "cd-form-message" > Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" > E- mail < input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Восстановить пароль" > < p class = "cd-form-bottom-message" >< a href= "#0" > Вернуться к входу < a href= "#0" class = "cd-close-form" > Закрыть |
- Вход
- Регистрация
E-mail Здесь сообщение об ошибке!
Пароль Скрыть Здесь сообщение об ошибке!
Запомнить меня
Забыли свой пароль?
Имя пользователя Здесь сообщение об ошибке!
E-mail Здесь сообщение об ошибке!
Пароль Скрыть Здесь сообщение об ошибке!
Я согласен с Условиями
Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль.
E-mail Здесь сообщение об ошибке!
Вернуться к входу
Закрыть
Базовый шаблон и элементы управления форм, автор выполнил в популярном, плоском стиле (Flat), с явным упором на минимализм. Ничего лишнего, в меру прозрачный фон затемнения, лёгкие для восприятия цвета, хорошо подобранный шрифт и иконки, для обозначения полей ввода. С помощью свойств CSS, вы легко сможете видоизменить любой элемент форм.
| .cd-user-modal { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba (52 , 54 , 66 , 0.9 ) ; z-index : 3 ; overflow-y : auto ; cursor : pointer ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0.3s ; -moz-transition: opacity 0.3s 0 , visibility 0 0.3s ; transition : opacity 0.3s 0 , visibility 0 0.3s ; } .cd-user-modal .is-visible { visibility : visible ; opacity : 1 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0 ; -moz-transition: opacity 0.3s 0 , visibility 0 0 ; transition : opacity 0.3s 0 , visibility 0 0 ; } .cd-user-modal .is-visible .cd-user-modal-container { -webkit-transform: translateY(0 ) ; -moz-transform: translateY(0 ) ; -ms-transform: translateY(0 ) ; -o-transform: translateY(0 ) ; transform : translateY(0 ) ; } .cd-user-modal-container { position : relative ; width : 90% ; max-width : 600px ; background : #FFF ; margin : 3em auto 4em ; cursor : auto ; border-radius : 0.25em ; -webkit-transform: translateY(-30px ) ; -moz-transform: translateY(-30px ) ; -ms-transform: translateY(-30px ) ; -o-transform: translateY(-30px ) ; transform : translateY(-30px ) ; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property : transform; -webkit-transition-duration: 0.3s ; -moz-transition-duration: 0.3s ; transition-duration : 0.3s ; } .cd-user-modal-container .cd-switcher : after { content : "" ; display : table ; clear : both ; } .cd-user-modal-container .cd-switcher li { width : 50% ; float : left ; text-align : center ; } .cd-user-modal-container .cd-switcher li: first-child a { border-radius : .25em 0 0 0 ; } .cd-user-modal-container .cd-switcher li: last-child a { border-radius : 0 .25em 0 0 ; } .cd-user-modal-container .cd-switcher a { display : block ; width : 100% ; height : 50px ; line-height : 50px ; background : #d2d8d8 ; color : #809191 ; } .cd-user-modal-container .cd-switcher a.selected { background : #FFF ; color : #505260 ; } @media only screen and (min-width : 600px ) { .cd-user-modal-container { margin : 4em auto ; } .cd-user-modal-container .cd-switcher a { height : 70px ; line-height : 70px ; } } .cd-form { padding : 1.4em ; } .cd-form .fieldset { position : relative ; margin : 1.4em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form label { font-size : 14px ; font-size : 0.875rem ; } .cd-form label.image-replace { /* заменить текст с иконой */ display : inline-block ; position : absolute ; left : 15px ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; height : 20px ; width : 20px ; overflow : hidden ; text-indent : 100% ; white-space : nowrap ; color : transparent ; text-shadow : none ; background-repeat : no-repeat ; background-position : 50% 0 ; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image : url ("../img/cd-icon-username.svg" ) ; } .cd-form label.cd-email { background-image : url ("../img/cd-icon-email.svg" ) ; } .cd-form label.cd-password { background-image : url ("../img/cd-icon-password.svg" ) ; } .cd-form input { margin : 0 ; padding : 0 ; border-radius : 0.25em ; } .cd-form input.full-width { width : 100% ; } .cd-form input.has-padding { padding : 12px 20px 12px 50px ; } .cd-form input.has-border { border : 1px solid #d2d8d8 ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .cd-form input.has-border : focus { border-color : #343642 ; box-shadow : 0 0 5px rgba (52 , 54 , 66 , 0.1 ) ; outline : none ; } .cd-form input.has-error { border : 1px solid #d76666 ; } .cd-form input[ type= password] { /* пространство для кнопки Скрыть */ padding-right : 65px ; } .cd-form input[ type= submit] { padding : 16px 0 ; cursor : pointer ; background : #2f889a ; color : #FFF ; font-weight : bold ; border : none ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .no-touch .cd-form input[ type= submit] : hover , .no-touch .cd-form input[ type= submit] : focus { background : #3599ae ; outline : none ; } .cd-form .hide-password { display : inline-block ; position : absolute ; right : 0 ; top : 0 ; padding : 6px 15px ; border-left : 1px solid #d2d8d8 ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; font-size : 14px ; font-size : 0.875rem ; color : #343642 ; } .cd-form .cd-error-message { display : inline-block ; position : absolute ; left : -5px ; bottom : -35px ; background : rgba (215 , 102 , 102 , 0.9 ) ; padding : .8em ; z-index : 2 ; color : #FFF ; font-size : 13px ; font-size : 0.8125rem ; border-radius : 0.25em ; /* предотвращения кликов и прикосновения */ pointer-events : none ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.2s 0 , visibility 0 0.2s ; -moz-transition: opacity 0.2s 0 , visibility 0 0.2s ; transition : opacity 0.2s 0 , visibility 0 0.2s ; } .cd-form .cd-error-message :: after { /* уголок сообщения об ошибке */ content : "" ; position : absolute ; left : 22px ; bottom : 100% ; height : 0 ; width : 0 ; border-left : 8px solid transparent ; border-right : 8px solid transparent ; border-bottom : 8px solid rgba (215 , 102 , 102 , 0.9 ) ; } .cd-form .cd-error-message .is-visible { opacity : 1 ; visibility : visible ; -webkit-transition: opacity 0.2s 0 , visibility 0 0 ; -moz-transition: opacity 0.2s 0 , visibility 0 0 ; transition : opacity 0.2s 0 , visibility 0 0 ; } @media only screen and (min-width : 600px ) { .cd-form { padding : 2em ; } .cd-form .fieldset { margin : 2em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form input.has-padding { padding : 16px 20px 16px 50px ; } .cd-form input[ type= submit] { padding : 16px 0 ; } } .cd-form-message { padding : 1.4em 1.4em 0 ; font-size : 14px ; font-size : 0.875rem ; line-height : 1.4 ; text-align : center ; } @media only screen and (min-width : 600px ) { .cd-form-message { padding : 2em 2em 0 ; } } .cd-form-bottom-message { position : absolute ; width : 100% ; left : 0 ; bottom : -30px ; text-align : center ; font-size : 14px ; font-size : 0.875rem ; } .cd-form-bottom-message a { color : #FFF ; text-decoration : underline ; } .cd-close-form { /* стиль X кнопки вверху справа */ display : block ; position : absolute ; width : 40px ; height : 40px ; right : 0 ; top : -40px ; background : url ("../img/cd-icon-close.svg" ) no-repeat center center ; text-indent : 100% ; white-space : nowrap ; overflow : hidden ; } @media only screen and (min-width : 1170px ) { .cd-close-form { display : none ; } } #cd-login , #cd-signup , #cd-reset-password { display : none ; } #cd-login .is-selected , #cd-signup .is-selected , #cd-reset-password .is-selected { display : block ; } |
Cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after { content: ""; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-user-modal-container .cd-switcher a.selected { background: #FFF; color: #505260; } @media only screen and (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher a { height: 70px; line-height: 70px; } } .cd-form { padding: 1.4em; } .cd-form .fieldset { position: relative; margin: 1.4em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* заменить текст с иконой */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image: url("../img/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("../img/cd-icon-email.svg"); } .cd-form label.cd-password { background-image: url("../img/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 12px 20px 12px 50px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input { /* пространство для кнопки Скрыть */ padding-right: 65px; } .cd-form input { padding: 16px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .no-touch .cd-form input:hover, .no-touch .cd-form input:focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* предотвращения кликов и прикосновения */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* уголок сообщения об ошибке */ content: ""; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media only screen and (min-width: 600px) { .cd-form { padding: 2em; } .cd-form .fieldset { margin: 2em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form input.has-padding { padding: 16px 20px 16px 50px; } .cd-form input { padding: 16px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* стиль X кнопки вверху справа */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; }
В эффекте перехода появления, добавлена задержка, чтобы добиться плавного исчезновения модального окна при закрытии.
Примечание:. Размер шрифта всех полей ввода установлен по умолчанию 16px. Это предотвращает автоматическое масштабирование, которое происходит при просмотре на мобильных устройствах.
Авторская, буржуинская версия плагина находится . Там же, вы сможете скачать оригинал.
Русскую версию, можете забрать с моего Яндекс.Диска, все необходимые файлы, бережно упакованы в один архив, перед этим не забудьте посмотреть, полностью адаптированный, живой пример работы этого замечательного плагина jQuery:
С Уважением, Андрей