Форма входа CSS3 в темном стиле | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSФорма входа CSS3 в темном стиле
Дата: 28.04.2013 в 20:41 | Просмотров: 4789

Форма входа CSS3 в темном стиле

Форма входа CSS3 в темном стиле
Скачатьбесплатно с сервера
Демодемонстрация

На картинке вверху видна готовая форма входа CSS. Это одна из работ старых работ пана из Вергилии. К сожалению, похоже, что он убрал его из публичного доступа, и я не смогу показать вам настоящую концепцию. Во всяком случае, вы, вероятно, поняли смысл того, что мы будем делать. А именно, удивительный световой эффект на чистом CSS3! Форма выполнена в темном стиле, но другой пример красивой формы входа можно увидеть в статье “Форма входа для сайта + эффект на JQuery!”.

HTML

Как обычно, начнем с html, и вот наша форма.

Посмотрите, как мы вводим новую функцию: “Запомнить меня”. Это специфично для формы ввода пароля.

CSS

Основные стили для формы входа на сайт:

Тень под формой входа будет выглядеть особенно, потому что отрицательный радиус распространения. Мы можем реально сжать тень.

Давайте немного разберем структуру нашей форме. Для полей, мы используем два тега р обертка, этикетки label и стандартный input. Нужно применить Clearfix для наших контейнеров.

Давайте добавим стили для label текст/пароль при наведении и активации поля.

Теперь у нас есть два красивых CSS3 поля, и мы должны стилизовать чекбокс “Запомнить меня” и кнопку отправки формы. Обе они стоят друг возле друга, на одной строке.

Мы используем передовые селекторы CSS3, чтобы ориентироваться на них, но вы можете использовать класс, если хотите. Во всяком случае, давайте начнем с чекбокса и label:

И последнее, что мы сделаем, это кнопку отправки формы:

Но где же наш обещанный эффект света? Ладно, ребята, давайте приступим к нему. Чтобы добиться этого, нам нужны три элемента:

  • Градиент от верхней части формы;
  • Небольшой флэш на предыдущей строке;
  • Крупное отражение в правой части формы

Мы начнем с первых двух элементов для тега form.

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

Важно: необходимо отключить событие щелчка по нему pointer-events property. Если вы этого не сделаете, вы не сможете нажать на формы ввода, так как там поверх них будет слой. Нам придется удалить отражения для браузеров, которые не поддерживают pointer-events (делаем мы это с помощью Modernizr):

Все готово! Надеюсь, Вы подчеркнули для себя что-то интересное и полезное из этого урока, и имеете готовую форму входа на CSS3.


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


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