Создать стильный сайт хочет каждый, но возникает вопрос чем его оформить, по этому, сегодня, рассмотрим такую мелочь ,как создание формы для входа пользователей на сайт, используя при этом библиотеку jQuery.  Плюс этой формы что ее можно использовать как вход на сайт, или вход в локальную сеть, или вход в какой-либо сервис. Кроме этого полученный результат можно подстроить под свои нужды, и использовать его вовсе не для логина. По этому данная форма заслуживает на внимание, давайте же посмотрим на исходный результат..

 

Для начала необходимо создать разметку нашей формы, на демо можно заметить, что иконка замка находится по центру, так же мы подключаем библиотеки JavaScript онлайн, это ускорит загрузку нашей формы, так как данные библиотеки зачастую находятся уже загруженные в кэше браузера, и так, разметка выглядит так:

Потом мы создаем фон, для этого  создадим блок с id=»bg», в которой будет находится таблица:

Далее стилизируем нашу таблицу стилей :

Затем определяем размеры нашего всплывающего окна, в уроке они имеют следующие параметры:

После этого, получаем следующий код, который содержит комментарии по этому поводу:

Теперь определяем параметры для нашей иконки входа, следующим вариантом:

Теперь пожалуй самое интересное, это создание формы, создаем мы ее следующим путем:

Все прекрасно выглядит, кроме в IE, как известно браузер от Майкрософта не поддерживает скругления углов.

Далее маленькая хитрость, подключения JavaScript‘a онлайн, и так получаем:

Создаем кнопку закрытия в правом верхнем углу формы. А также прописываем красивый эффект затухания при закрытии формы:

И последние эффекты, с которыми наша форма логина будет готова:

Вот и все, внимательно читаем урок и не допускаем ошибки в коде , и у Вас все будет прекрасно работать. Надеемся урок Вам был интересен.

На главную