Форма авторизации html css

Форма авторизации html css

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

Пример разных видов переключения форм можно увидеть здесь:

Посмотреть примерСкачать

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

HTML часть

Мы помещаем две формы, а одну скрываем с помощью CSS:

Мы используем некоторые элементы HTML5, такие как , а также для того чтобы на писать внутри input-а некоторы текст для примера. Еще мы использовали атрибут required для обязательного заполнения поля. И мы нигде не используем Javascript.

CSS часть

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

Итак, начнем. Зададим основные стили для наших форм:

Добавим стиль для заголовка:

Обратите внимание, что свойство background-clip: text поддерживают webkit браузеры.

Сейчас пропишем стили для input-ов:

Мы выставили outline: none;, а значит в некоторых браузерах не будут видны активные input-ы. Поэтому не забудьте потом задать свойства для псевдоэлементов :focus и :active:

Сейчас добавим стили для кнопки входа и регистрации:

Мы сделали внутреннюю и внешннюю тень, а также границу.

А сейчас рассмотрим анимацию при переключении. Изначально необходимо спрятать вторую форму:

Для первой формы z-index: 22, то есть вторая форма будет находиться под первой.

Для переключения формы мы будет использовать псевдоэлемент :target :

Для создания анимации при переключении будем использовать CSS фреймфорк:

Читайте также:  Касперский 10 как обновить базы

Форма которая «исчезает» имеет другую анимацию:

Вывод

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

Адаптивные модальные формы входа и регистрации

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

Данный метод будет полезен, если вы захотите сделать так, чтобы формы входа и регистрации были доступны для пользователей на каждой странице вашего сайта. При входе на сайт или регистрации, пользователи не будут перенаправлены на другую страницу, и смогут выполнять все необходимые действия «не отходя от кассы», всё на одной странице.

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

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

Читайте также:  Readme note 5 pro 4pda

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Cloudflare Ray ID: 578562a87f6e9beb • Your IP : 5.45.65.94 • Performance & security by Cloudflare

Ссылка на основную публикацию
Усики для автомобильной антенны
Убираясь в бардачке я наткнулся на ремкомплект антенных усиков — лежит наверно уже полгода, всё наклеить не могу, то забываю,...
Телефонный шлюз что это
VoIP-шлюз — это межсетевой шлюз, предназначенный для перевода трафика между сетями различных типов. VoIP-шлюзы можно разделить на многоканальные и одноканальные:...
Телефонная клавиатура на компьютере
Виртуальная клавиатура выручит Вас, когда выйдет из строя основное физическое устройство ввода, полностью или частично ( поломается несколько клавиш )....
Усиление сигнала интернета на даче своими руками
С наступление дачного сезона, я озадачился установкой хорошего скоростного интернет на даче, у нас голосовая связь работает без проблем, а...
Adblock detector