Элегантная форма авторизации с использованием CSS3

Элегантная форма авторизации с использованием CSS3

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации.

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

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

Примеры

Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle, либо скачать код архивом по следующей ссылки:

Особенности

  • В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
  • Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
  • Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow. В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

* * *

На специализированном сайте представлены материалы по css html для чайников. Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.

Комментарии (38)
  1. 1
    kozlovski

    chrome — label Запомнить меня — выше чекбокса.
    Еще, неплохобы сделать состояния :hover, :active для кнопки

  2. 6
    Николай

    Отличная форма. Я только недавно свою делал и тоже долго парился с правильным расположением всех элементов и цветового соотношения. Спасибо :)

  3. 7
    Дмитрий

    Круто ! Спасибо, как раз делал авторизацию и нужен был шаблон.

  4. 8

    О, какая штука! Спасибо, Дим! :)

  5. 13

    Да, уже надо переходить на Css 3 :) что т я задерживаюсь))
    спасибо, за сайт с Psd, найден хороший источник)

  6. 14

    Как и в своей предыдущей статье, я взял интересный пример

    Ссылка на предыдущую статью ведёт в никуда!

  7. 16
    Shumaher

    такой вопрос: форму можно изменить без плагинов и без правки wp-login.php, а через, например, functions.php темы?
    а то редактирование файлов движка — это не очень хорошо. у себя осталось найти решение лишь для одного файла, который изменяю, чтобы полностью от этого избавиться

  8. 20

    Благодарю. То что нужно!

  9. 21

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

  10. 22

    box-shadow — красивая плюшка :) Нашел для нее парочку применений.

  11. 23
    BACK-BIZE

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

  12. 25

    Симпотичная и что-то напомнило. В phpmyadmin очень похожая и, видимо, с теми же цветами :)

  13. 26
    Евгений

    Зер Гуд ЯЯ!! Хорошая работа!

  14. 27

    Отлично!

    Побольше бы таких реализованных решений, интернет бы стал бы привлекательнее и верстальщики опытнее и практичнее!

  15. 28

    Спасибо. Как раз нужно. Подписался на rss, отличный блог.

  16. 29
    JustBeenPaid

    Спасибо за форму авторизации!
    Заюзал у себя на сайте!

  17. 30
    ALF

    я дико извиняюсь господа, но может кто-томне ответит, какова причина «кракозямб» вместо буков? так все работает, а вот «кракозямбы» меня смущают))

  18. 35
    higimo

    «больший радиуса закругления» — второй пункт особенностей. Исправьте, пожалуйста

  19. 37

    Дима ты конечно извини но спасибо тебе за форму я для нее урок сделал )) Надеюсь ты не против. Ты же знаешь не все умеют пользоваться CSS3 ))

  20. 38
    Алексей

    Не в обиду будет сказано, но что-то форма очень напоминает wordpress-совскую родную. Но для начала, конечно, можно сделать и так. :)