Мы уже знаем, что 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;
}

Окончательный результат 

Используя вышеописанные методы, мы получим такой окончательный результат:

Заключение 

Эта форма выглядит хорошо и в старых браузерах, как Вы можете видеть ниже:

Снимок экрана в браузере Internet Explorer 8.

Автор урока Catalin Rosu

Перевод — Дежурка

Смотрите также:

• Создаем круговые и эллиптические градиенты с использованием CSS3
• Обращения к файлу определенного типа при помощи селектора атрибутов CSS
• Создание отражения изображения с использованием CSS3