Просто красивая форма входа CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSПросто красивая форма входа CSS3
Дата: 29.04.2013 в 23:06 | Просмотров: 5528

Просто красивая форма входа CSS3

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

Красивая форма входа, простая и привлекательная, легкая и светлая. Одна из особенностей этой формы является отсутствие label или подписанных названий полей. Да, как я уже говорил раннее, необходимо ясно показать пользователю, какое поле для чего. И в данном случае мы используем текст внутри форм, для обозначения формы. И для браузеров, которые не поддерживают их, мы сделаем видимые метки! Ещё один пример шикарной формы в статье “Форма входа для сайта + эффект на JQuery!”.

HTML структура

Сама форма входа, построенная стандартным способом с помощью form:

Позвольте обратить Ваше внимание на новый атрибут required. Если он поддерживается браузером, то позволяет ему проверить, заполнено ли обязательное поле или нет.

CSS

Как всегда, начнем с формы и её названия, так как это довольно просто.

Перейдем с стилизации полей формы, и сделаем её ещё красивее:

Давайте изменим стиль для “заполнителей” placeholder (где это возможно):

Далее добавим стили при наведении на элемент, а также при активации поля ввода:

Теперь кнопка отправки формы, которая будет вписываться в стиль формы:

А теперь, давайте стилизуем резервный вариант, в случае если браузер пользователя не поддерживает placeholder. Это очень важно для пользователю, и этому нужно уделить время, для организации запасного варианта.

На это все, и вот наша красивая форма входа на сайт готова!


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


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