Форма входа для сайта + эффект на JQuery! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryФорма входа для сайта + эффект на JQuery!
Дата: 26.04.2013 в 20:04 | Просмотров: 22654

Форма входа для сайта + эффект на JQuery!

Форма входа для сайта + эффект на JQuery!
Скачатьбесплатно с сервера
Демодемонстрация

Современная форма регистрации/входа привлекает внимание обычного посетителя, и конечно не останется незамеченной. Так вот, сегодня у нас на очереди красивая форма входа для сайта. Ещё один пример формы в статье “Красивая форма авторизации на CSS3″.

Набор функций стандартный, но все же некоторые новые опции присутствуют, а именно: “Войти через Twitter” и переключатель “Показать пароль”. Это потребует использования JavaScript. Рассматриваемая сегодня форма входа css, создана с использованием последних веб-разработок. Подобные эффекты и функции, при желании, можно осуществить и на других формах.

HTML код

Для названия формы мы будем использовать заголовок. В данном случае это заголовок первого уровня h1, но Вы, в принципе, можете использовать все, что хотите. Мы также используем labels для атрибута for.

CSS

Давайте начнем с того, что зададим общие стили к целой форме:

Мы создадим полупрозрачные границы, применив при этом некоторые функции тени.

Теперь, когда мы дали некоторые основные стили для нашей форме, разберемся с заголовком. Есть 3 разных стиля шрифтов в заголовке: “Войти”, “или”, “зарегистрироваться”. Поэтому основные стили будет применены к одной части заголовка + создаем для двух других span, и свои классы.

Далее, мы используем два тега p, которые будут размещены рядом друг возле друга. Каждый из этих имеет ширину 50%.

Наши стили для p заданы. Давайте стилизуем элементы внутри них! Что у нас есть? Есть label и input. Иконки находятся внутри label:

Примечание: с помощью cursor: pointer на label помогает пользователю понять, что он может нажать на них, и таким образом активировать строку формы. Это очень важно.

Мы не забыли про стили для hover и focus:

Проверьте, как мы используем селектор брат (~), чтобы вызвать состояние при наведении на формы и label. Разве это не очень классно?

Теперь, кнопки отправки формы. Но подождите, сначала применим Clearfix к нему. Как это сделать?

Обе эти кнопки имеют ширину 49%, и у них есть левый / правый отступ, чтобы сделать небольшой зазор между ними. Теперь мы задаем стили при наведении на кнопку.

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

Важно: для браузеров, которые не поддерживают Box-shadow (пока ещё существуют), мы используем цвет фона/ Это хороший вариант того, как можно создать простую альтернативу для старых браузеров.

JavaScript

Эй, Вы не забыли про наш маленький эффект “Показать пароль”? Создадим его! Во-первых мы конечно же не можем изменить тип input? Поэтому, чтобы создать переключатель, мы должны удалить фактический input пароля и создать вместо него текстовый input. А сделаем мы это с помощью JQuery. Давайте посмотрим:

Вот план работы скрипта:

  • Он замечает каждую активацию класса .showpassword;
  • Он создает новый контейнер (.opt);
  • Внутри этого контейнера, он создает чекбокс;
  • Он вставляет этот контейнер после .showpassword родительского input.
  • Когда чекбокс в нажатии, он удаляет .showpassword первоначального типа, и создает тип “текст”.

Давайте дадим некоторые стили для нашего чекбокса и нового label.

Последнее, но не менее важное, мы добавим несколько строк JQuery для того, чтобы изменять значок, когда мы используем переключатель “Показать пароль”! Довольно просто, но весьма эффективны и красиво!

Вот и форма входа CSS готова! Приятного дня!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2012/10/16/custom-login-form-styling/
Перевел: Владислав Бондаренко


Добавить комментарий