Главная CSS-верстка

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

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

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

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

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

Примеры

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

Особенности

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

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

* * *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  14. Отлично!

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

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

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

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

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

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

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

Ваш комментарий