Создание формы входа с эффектом стопки бумаги

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

Формы входа являются неотъемлемой частью любого динамического веб-сайта. Они предоставляют пользователям сайта доступ к ограниченному контенту. В этом уроке мы будем изучать многие функции CSS3, такие как тень текста, прямоугольник, линейные градиенты и переходы, чтобы создать простую и элегантную форму входа в систему с видом в виде стопки бумаги..

Изображение выше показывает предварительный просмотр формы входа, которую мы будем создавать. Готовы окунуться? Давайте начнем!

1. Основная разметка HTML

Разметка HTML, которую мы будем использовать, очень проста, после объявления HTML5 Doctype у нас есть а также </code> теги. В пределах <code><body></code> тег, у нас есть <code><section></code> тег с классом «сложены». это <code><section></code> тег используется для определения ширины поля содержимого и выравнивания его по центру страницы. Мы также будем использовать имя класса этого тега, чтобы нацелиться на этот тег с помощью CSS. <code><form></code> тег следует <code><section></code> тег. Тег формы не имеет допустимого значения для атрибута 'action', так как он используется только для демонстрации. Внутри поля формы находятся объявления для меток электронной почты, пароля и поля ввода, после чего следует кнопка отправки. Здесь важно отметить, что мы использовали поле ввода с типом «электронная почта». Это предоставляется нам декларацией HTML5, и оно постепенно изменится до обычного поля ввода текста в старых браузерах..</p> <p>Вот вся разметка HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Простая форма входа

  Авторизоваться
   Эл. адрес  
   пароль

     И вот предварительный просмотр того, что мы создали до сих пор:
  
 2. Добавление основных стилей
 Создайте новый CSS-файл с именем master.css и добавьте ссылку на этот файл в ваш основной файл HTML. Мы начнем наш CSS-файл с быстрого сброса, чтобы получить единообразие в разных браузерах. Давайте также добавим красивое фоновое изображение на нашу страницу. Изображение, которое я использовал, было взято с SubtlePatterns. Не стесняйтесь просматривать сайт, чтобы найти фоновое изображение на свой вкус. Мы можем добавить фоновое изображение с помощью следующей декларации. Также обратите внимание, что я использую Open Sans шрифт из Google Web Font для основного текста.
  / * -------- Базовые стили --------- * / body, html margin: 0; отступы: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") повторение слева вверху; шрифт: 16px / 1.5 "Open Sans", Helvetica, Arial, без засечек;  div.wrap width: 400px; поле: 80px авто; 
 3. Эффект сложенной бумаги
 Теперь, когда у нас есть основной макет, давайте приступим к разработке формы. Для получения эффекта стопки бумаги мы будем использовать :после а также :до псевдо-элементы. Эти псевдоэлементы в основном используются для добавления визуальных эффектов к любому селектору.. 
  :до псевдоэлемент используется для добавления содержимого перед содержимым селектора и :после псевдоэлемент для после содержимого селектора. 
 Мы начнем с того, что дадим раздел с классом «сложенный», шириной 400 пикселей и высотой 300 пикселей. Далее, мы дадим этому полю цвет фона # f6f6f6 и границу толщиной 1 пиксель с цветом #bbb. Ключевыми моментами, на которые следует обратить внимание, являются объявление границы радиуса и объявление box-shadow. Здесь префиксы браузеров "-moz-" и "-webkit-" используются для гарантии того, что это работает в браузерах на основе gecko и webkit. 
 Объявление границы радиуса очень просто и используется для создания закругленных углов, с 3px, представляющими кривизну. Синтаксис объявления box-shadow может показаться сложным, но давайте разберем его на более мелкие куски, чтобы лучше понять. 
  / * -------- Радиус границы --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Первые два нуля обозначают смещение по оси x и смещение по оси y, а 3 пикселя - размытие. Далее идет объявление цвета. Я использовал значения RGBA здесь; RGBA означает красный зеленый синий и альфа (непрозрачность). Таким образом, 4 значения в скобках указывают количество красного, зеленого, синего и его альфа (непрозрачность).
  .stacked background: # f6f6f6; граница: 1px solid #bbb; высота: 300 пикселей; маржа: 50px авто; положение: относительное; ширина: 400 пикселей; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя; 
 Теперь, когда мы создали базовую ограничивающую рамку для формы, давайте начнем с :после а также :до псевдо-элементы. 
  .stacked: after, .stacked: before background: # f6f6f6; граница: 1px solid #aaa; низ: -8px; содержимое: "; высота: 250px; слева: 2px; позиция: абсолютная; ширина: 394px; z-индекс: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: перед низ: -14px; слева: 5px; ширина: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0.5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0.5); box -shadow: 0 0 15px rgba (0,0,0,0.5);
 Код для: after и: before псевдоэлементы почти точно похожи на код ограничивающего прямоугольника, рассмотренного выше. Здесь важно отметить только то, что эти псевдоэлементы расположены абсолютно по отношению к ограничительной рамке. Каждый из псевдоэлементов постепенно уменьшается на несколько пикселей, чтобы придать ему вид стопки.
 4. Поля ввода
 В разметке HTML мы добавили класс 'text-input' как в поле электронной почты, так и в поле пароля, чтобы мы могли легко ориентироваться на эти элементы с помощью наших объявлений CSS. Вот объявление CSS, которое применяется к обоим полям ввода.
  Форма input.text-input outline: 0; дисплей: блок; ширина: 330 пикселей; обивка: 8px 15px; рамка: 1px сплошная серая; размер шрифта: 16 пикселей; вес шрифта: 400; -webkit-border-radius: 25 пикселей; -moz-border-radius: 25 пикселей; радиус границы: 25 пикселей; тень от рамки: вставка 0 2px 8px rgba (0,0,0,0,3); 
 Здесь мы снова использовали объявления border-radius и box-shadow. В случае текстовых полей граница-радиус получает более высокое значение, чтобы обеспечить большую кривизну. В случае объявления box-shadow, ключевое слово inset использовалось, чтобы указать, что тень будет внутри текстового поля. Здесь вертикальное смещение тени составляет 2 пикселя, а размытие - 8 пикселей, цвет объявляется с использованием формата rgba..
 Чтобы добавить интерактивность к полям ввода, мы изменим свойство box-shadow для поля ввода в состоянии 'hover'. Новое объявление box-shadow имеет нулевые смещения по x и y, но имеет размытие в 5px, с цветом, объявленным в формате rgba.
 5. Кнопка «Отправить»
 Последняя часть этой формы, которую мы должны заполнить, это кнопка отправки. Аналогично полю ввода мы дадим кнопке отправки радиус 25 пикселей, используя свойство border-radius. Свойство box-shadow со смещением по оси y на 1 пиксель также было добавлено, чтобы придать кнопке “внутренняя тень” эффект.
  ввод формы [type = 'submit'] float: right; отступы: 10px 20px; дисплей: блок; курсор: указатель; размер шрифта: 16 пикселей; вес шрифта: 700; цвет: #fff; тень текста: 0 1px 0 # 000; цвет фона: # 0074CC; граница: 1px solid # 05C; -webkit-border-radius: 25 пикселей; -moz-border-radius: 25 пикселей; радиус границы: 25 пикселей; background-image: -moz-linear-Gradient (вверху, # 08C, # 05C); фоновое изображение: -ms-линейный градиент (вверху, # 08C, # 05C); background-image: -webkit-linear-Gradient (вверху, # 08C, # 05C); background-image: линейный градиент (вверху, # 08C, # 05C); -webkit-box-shadow: вставка 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: вставка 0 1px 0px rgba (255, 255, 255, 0,5); тень от рамки: вставка 0 1px 0px rgba (255, 255, 255, 0,5); 
 Здесь важно отметить объявление о добавлении градиента к этой кнопке. CSS3-градиенты - довольно большая тема, и мы будем только царапать поверхность. Для этой кнопки отправки мы добавим линейный градиент от # 08C до # 05C. Как и во всех других свойствах CSS3, которые мы использовали до сих пор, мы добавим префиксы вендоров «-moz», «-webkit» и «-ms», чтобы обеспечить работу градиента в разных браузерах..
 6. Демонстрация и загрузка
 Наша форма авторизации заполнена. Проверьте демо, чтобы увидеть, как выглядит заполненная форма. Если вы потерялись в какой-то момент или не смогли продолжить учебник, не беспокойтесь, просто загрузите файлы на рабочий стол и возьмите существующий код CSS, чтобы понять, как он работает.
 Надеюсь, вам понравился этот урок. Не стесняйтесь экспериментировать с этими функциями и не забудьте поделиться своими мыслями.
 демонстрация
 Скачать файлы
 
Примечание редактора: Этот пост написан Бхарани М для Hongkiat.com. Бхарани - дизайнер / разработчик из Нью-Дели, Индия. В настоящее время он работает над Resumonk.com - онлайн-разработчиком резюме, которое поможет вам создать профессиональное и красивое резюме за считанные минуты. Также проверьте его сторонний проект - Quotescube.com - ваша ежедневная доза цитат.