Красивая форма авторизации на CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКрасивая форма авторизации на CSS3
Дата: 25.04.2013 в 23:11 | Просмотров: 14639

Красивая форма авторизации на CSS3

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

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

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

HTML

Но в начале создаем стандартный вид формы HTML.

Итак, все достаточно просто, и мы не используем никакие ярлыки label. Для того, чтобы указать пользователю в каком поле что писать, мы не только подписываем их, но и присваиваем каждому красивую иконку. Это тег i.
Примечание: Мы не будем рассматривать здесь, как использовать шрифт FontAwesome или как его подключить.
У нас есть две обертки для значков. Кнопка отправки имеет собственный класс, и мы используем button вместо input.
Мы также будем использовать новые возможности CSS3, а именно placeholder.

CSS

Мы начнем с того, что зададим некоторые стили для самого элемента, чтобы сделать нашу форму красивой.

Важно: Мы установили позиционирование относительное для того, чтобы для кнопки отправки можно было задать абсолютное. Мы делаем то же самое и для .field поля чтобы задать иконкам также абсолютное позиционирования.

С правой стороны от иконок, мы установим тонкую линию и некоторые тени.
Так как мы собираемся изменять цвет для :hover и :active, мы добавим им плавный переход.
Теперь мы должны также дать некоторые стили к форму входа:

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

Два момента: мы используем селектор брат (~), чтобы изменять цвет иконки: голубой для наведении, более темный, синий для фокуса, при активации. И мы удалить обводку для Chrome.
Последнее, что мы стилизуем, так это кнопку “Войти”.

Для кнопки отправки данных формы, мы создаем круглую кнопку и размещаем её сверху нашей формы, с правой стороны. Тень будет подчеркивать этот эффект перекрытия.

И в завершении мы сделаем простой эффект моргания при наведении на кнопку:

Довольно просто: простой цвет для наведения и фокусировки. Но подождите, это еще не все! Мы используем градиент по умолчанию, чтобы браузер отключал первый градиент, а затем применял цвет фона. Это конкретное действие и вызывает белую вспышку при наведении курсора, которая, на мой взгляд, довольно отлично смотрится. Это похоже на краткое отражение света! На этом создание кнопки завершено, и я дума, чтобы создана очень даже красивая форма авторизации!


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


ВСЕ КОММЕНТАРИИ

    1. никита:

      вру

      проверил почти нормально работает, только формы ввода вылазят за рамки

      1. Влад Бондаренко:

        Здравствуйте! Что именно вылазит? (если можно, прикрепите скриншот) Форма проверена, всё работает корректно.

    1. Artem:
      http://www.skaj.ru

      Здравствуйте, я в CSS совсем не бум бум, не подскажите, а как быть с картинками, чтоб они появлялись?!

    1. Artem:
      http://www.skaj.ru

      рядом с полями логин и пароль, человечик и замок :-)

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Иконки – подключенный шрифт @import url('font-awesome.css');,
        Для того, чтобы эти две иконки отображались у Вас, вам необходимо подключить файлы шрифта font-awesome (который прилагается к исходнику) к сайту, и подключить файл стилей font-awesome.css, который также есть в файлах исходника. После этого код на странице типа этого будет отображать иконки.

    1. Алексей:

      У меня в Опере и ФФ вместо знаков шрифта отображаются либо “?” (для Оперы) или код значка, указанный в стиле шрифта – типа “F023″ (для ФФ) , а вот в Хроме и ИЕ – идеально (в ИЕ9 транзишин, правда, не совсем корректно работает). Сделал всё вроде правильно.

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте, проверьте кодировку файлов (должна быть UTF8 без BOM). Возможно, проблема в этом. Идеально всё работает в самых последних версиях большинства бразузеров. В остальных – 100% корректная работа не гарантирована.

        1. Алексей:

          Кодировка UTF8, даже местами форматы шрифта .eоt и .svg менял в записи @font-face{} (пишут, что иногда помогает) – результат 0. Там проблема была в том, что в файле css для самого шрифта так же как и в основном css подключен был шрифт, т.е. @font-face{….} был прописан и в основном css и в css для шрифта. Как только была удалена эта часть в css шрифта – ВСЁ ВЕЗДЕ ЗАРАБОТАЛО!))

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