Авторизация и регистрация на сайте является весьма щепетильной темой, так как порой данная форма занимает много места на сайте, и хотелось как бы освободить место при этом оставив все на своих местах. В этом уроке мы рассмотрим как создать замечательную выпадающую форму авторизации для сайта. Для него будет использоваться CSS3 и jQuery. Основная задача — избежать ожидания загрузки отдельной страницы для входа на сайт. Таким образом повышается уровень удобства использования интерфейса.

 
Для индикации состояния формы будут использоваться элементы HTML, которые преобразуются в кнопки с помощьюCSS3 — стрелки, показывающие состояние формы (развернуто/свернуто).

 Также будет использоваться jQuery для анимированного разворачивания/сворачивания формы. А в самой форме будут использоваться новые свойства HTML5. Ниже приводится разметка HTML, которая используется для организации формы:

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

JavaScript код достаточно простой. Структура if…else  организует индикацию текущего состояния формы. Происходит переключение содержания элемента span между символами ? и ?.

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