Создание интересной формы авторизации с использованием HTML5 и CSS3

5 ноября 2014 | Опубликовано в css | 1 Комментарий »

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

Демонстрация работы

Разметка

<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 код

Описание новых для HTML атрибутов, согласно спецификациям:

· placeholder — короткая подсказка, одно слово или короткая фраза, предназначенная для того, чтобы помочь пользователю, когда он вводит данные в поле, представленное элементом.
· required — определяет, что элемент является требуемой частью для отправки формы.
· autofocus — определяет, что элемент представляет собой поле, которому интерфейс пользователя должен присвоить фокус, как только загрузиться документ.
type="password" — определяет, что этот элемент является простым однострочным полем ввода для пароля, это не является нововведением HTML5.

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;
    box-shadow: 0 0 0 1px #fff;
}

Тонкие градиентные линии

Нам сразу очень понравился этот эффект, так что мы решили использовать его для подсвечивания заголовка. Опять же с помощью псевдоклассов и градиентов CSS3 мы добавим интересные линии, изображающие эффект штриха.

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 {
    right: 0;
}
h1:before {
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}