Практически ни один сайт не может обойтись без формы авторизации на сайте. Авторизация на сайте позволяет не только удержать пользователя но и предоставить ему больше возможностей взаимодействия с сайтом. Сегодня речь пойдет о создании необычной формы авторизации и регистрации для сайта с применением CSS3 и немного JS. Идея состоит в том, что у нас будут два блока, один с авторизацией, а второй как вы уже поняли, с регистрацией, при переключении между ними панель с формой будет скользить предоставим посетителям интерактивный опыт.

 

Если вы хотите использовать уже готовый шаблон, тогда обратите внимание на предложение от наших партнеров, там есть много интересных шаблонов с поддержкой и обновлениями, а также русским языком:

Шаг 1. HTML

После того, как вы подключили все скрипты к вашей странице, вам осталось создать разметку, которая будет использоваться в слайдере авторизации, у нас она будет выглядеть следующим образом:

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

Вся разметка будет заключена в один общий контейнер, для которого было установлена позиция на странице.

Шаг 2. CSS

После того как закончили с разметкой то переходим к следующему шагу, нам для начала нужно определить общие параметры для контейнера:

Затем создаем фон, для нижнего слайдера, где будут располагаться два блока слайдера:

Теперь нужно установить стили для верхнего блока и также мелкие элементы на нижнем:

Устанавливаем стили для самой формы и элементов которые будут отображаться при вводе данных:

Шаг 3. JS

Последним шагом станет добавление немного магии, а именно анимации и переключения между формами, поможет нам в этом javascript:

В результате у вас получилась достаточно интересная форма авторизации. Материал взят из зарубежного источника и описан нашей командой.

Вот и все. Готово!