Создание интересной формы авторизации с использованием 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; }
Окончательный результат
Используя вышеописанные методы, мы получим такой окончательный результат:
Заключение
Эта форма выглядит хорошо и в старых браузерах, как Вы можете видеть ниже:
Снимок экрана в браузере Internet Explorer 8.
Автор урока Catalin Rosu
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191