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

В данном уроке мы рассмотрим как стилизовать, да, именно стилизовать, а не создать рабочую форму, если вам интересна рабочая форма, то читайте предыдущие темы про авторизацию на нашем сайте, с эффектом анимации с помощью СSS3.

Шаг 1. HTML

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

Теперь сама разметка, для этого у нас будет небольшой контейнер с содержанием.

С разметкой никаких проблем возникнуть не должно, перейдем к следующему шагу.

Шаг 2. СSS

Начнем с размещения, для начала мы должны задать базовые стили и элементы позиционирования формы на страничке.

Теперь стили для авторизации и общего стиля формы.

Теперь придадим стиль контейнеру, придавая ему слегка закругленные углы и глубину теней.

Теперь стилизуем кнопку входа, для этого мы будем использовать градиентную заливку.

Затем создаем анимацию плавного появления формы.

И переходы для интерактивных элементов.

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.