Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> CSS

Создаём стильную форму входа с HTML5 и CSS3


Всем тёплого настроения и доброго дня. Идея данного урока мне пришла спонтанно, я подумал о чём-то прекрасном, и вдруг понял, что на сайте ещё нет информации по которой можно было бы сделать стильную форму для входа на сайт. Этот недочёт я решил исправить и написать данную статью.


    И так, сегодня мы будем создавать форму входа на сайт, с помощью HTML5 который нам удружит своей простотой в разметке, а так же возможностью не использовать Javascript-код, и CSS3, с помощью которого, мы раскрасим нашу форму и сделаем её привлекательной.

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

 

HTML

<form id="login">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" type="text" placeholder="Username" autofocus required>   
        <input id="password" type="password" placeholder="Password" required>
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">Forgot your password?</a><a href="">Register</a>
    </fieldset>
</form>

    Давайте я поясню некоторые элементы HTML5 которые я применил в данном уроке (подробнее об HTML5):

  • placeholder – некое слово или фраза внутри поля формы, который исчезает при получении фокуса или набора текста;
  • required – указывает на то, что элемент является обязательным для заполнения;
  • autofocus  - устанавливает, что поле формы получает фокус после загрузки страницы; 
  • type=”password” - все введённые в форму символы показываются звездочками. 

CSS

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

    Эффект стопки бумаги

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

#login
{
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),  
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,  
          0 7px 0 rgba(0, 0, 0, .2);
}

    Эффект стежков

    Достигается данный эффект при помощи псевдо-элементов. Это поможет избежать нам дополнительной разметки, и мы получим более чистый CSS.

 

#login
{
    position: absolute;
    z-index: 0;
}

#login:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}

Фрагмент стиля.

Градиент в виде тонких линий

    Впервые я увидел этот интересный эффект на странице Gene Locklin‘s, и подумал что это очень классно. Итак, я решил использовать его для заголовка «Вход». С помощью псевдо-элементов (снова) и градиентов CSS3, мы добавим 2 линии к нашему слову, чтобы имитировать эффект вычёркивания.
 

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

    Ура! Мы выполнили все шаги на пути к нашей заветной стильной форме входа, вот результат:

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

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


Дата публикации: 03.02.2013
Опубликовал: Сергей Кашурин
Просмотров: 834
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
ex256300rus
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: