Створення форми входу в аркуші з ефектом Stacked Paper

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

Форми входу є важливою частиною будь-якого динамічного веб-сайту. Вони забезпечують механізм доступу користувачів до веб-сайтів до обмеженого вмісту. У цьому підручнику ми розглянемо багато функцій CSS3, таких як text-shadow, box-shadow, лінійні градієнти та переходи, щоб створити просту і елегантну форму для входу з виглядом укладеного паперу.

Зображення вище показує попередній перегляд форми входу, яку ми будемо створювати. Готові поринути? Давайте розпочнемо!

1. Основна HTML-розмітка

Розмітка HTML, яку ми будемо використовувати, дуже проста, після декларації HTML5 Doctype, ми маємо і </code> теги. У межах <code><body></code> tag, ми маємо a <code><section></code> з класом "накладений". Це <code><section></code> Тег використовується для визначення ширини поля вмісту та для вирівнювання його до центру сторінки. Ми також будемо використовувати ім'я класу цього тегу для націлювання на цей тег за допомогою CSS. A <code><form></code> слід <code><section></code> . Тег форми не має дійсного значення для атрибута "дія", оскільки він використовується лише для демонстрації. Всередині поля форми містяться декларації для міток електронної пошти та пароля та поля введення, за якими йде кнопка подання. Важливо відзначити, що ми використали поле введення з типом "електронної пошти". Це надано нам декларацією 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 з швидким скиданням, щоб отримати рівномірність у різних браузерах. Давайте також додамо приємне фонове зображення на нашу сторінку. Зображення, яке я використав, було взято з Тонкі літери. Ви можете переглядати сайт, щоб знайти фонове зображення, яке відповідає вашому смаку. Ми можемо додати фонове зображення за допомогою наступної заяви. Також зверніть увагу, що я використовую Відкрити Sans шрифту з веб-шрифту Google для основного тексту.
  / * -------- Базові стилі --------- * / 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, sans-serif;  div.wrap width: 400px; запас: 80px auto; 
 3. Ефект накладання паперу
 Тепер, коли у нас є основний макет і працює, дозволяє почати з розробки форми. Для отримання ефекту накладеного паперу ми скористаємося : після і : раніше псевдоелементи. Ці псевдоелементи в основному використовуються для додавання візуальних ефектів до будь-якого селектора. 
 The : раніше Псевдоелемент використовується для додавання контенту перед змістом селектора і : після псевдоелемент для вмісту селектора. 
 Ми почнемо давати розділ, з класом 'stacked', шириною 400px і висотою 300px. Крім того, ми надамо цьому вікні колір тла # f6f6f6 і кордон товщиною 1 піксель з кольором #bbb. Ключовими речами тут є декларація кордону-радіусу та декларація про тіні. Тут, "-moz-" і "-webkit-" префікси веб-переглядача використовувалися для гарантії того, що це працює у веб-переглядачах на базі gecko та webkit. 
 Декларація прикордонного радіусу дуже проста і використовується для створення закруглених кутів з 3px, що представляє кривизну. Синтаксис декларації box-shadow може виглядати складним, але давайте розберемо його на менші шматки, щоб краще зрозуміти його. 
  / * -------- Радіус кордону --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; радіус кордону: 3px; / * -------- 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-offset і y-offset, а 3px - розмиття. Далі йде оголошення кольору. Тут я використовував значення rgba; rgba означає червоний зелений синій і альфа (непрозорість). Таким чином, 4 значення в дужках вказують кількість червоного, зеленого, синього та його альфа (непрозорість).
  .stacked background: # f6f6f6; кордон: 1px твердий # bbb; висота: 300px; запас: 50px auto; позиція: відносна; ширина: 400px; -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; радіус кордону: 3px; 
 Тепер, коли ми створили основну рамку для форми, давайте почнемо з : після і : раніше псевдоелементи. 
  .stacked: after, .stacked: before background: # f6f6f6; кордон: 1px твердий #aaa; знизу: -8px; content: "; height: 250px; ліворуч: 2px; позиція: абсолютна; ширина: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); поле тіні: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; кордон-радіус: 3px; .згорнуто: до bottom: -14px; ліворуч: 5px; ширина: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; кордон-радіус: 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); -шани: 0 0 15px rgba (0,0,0,0,5);
 Код для: після і: перед псевдоелементами майже точно подібний до того, що описано вище. Важливо лише відзначити, що ці псевдоелементи розташовані абсолютно по відношенню до обмежувальної рамки. Кожен з псевдоелементів поступово знижується на кілька пікселів, щоб надати йому вигляд стопкою паперу.
 4. Поля введення
 У розмітці HTML ми додали клас "введення тексту" як до поля електронної пошти, так і до поля "пароль", щоб ми могли легко націлити ці елементи на наші декларації CSS. Ось декларація CSS, яка застосовується до обох полів введення.
  форма input.text-input контур: 0; дисплей: блок; ширина: 330px; заповнення: 8px 15px; кордон: 1px суцільно сірий; розмір шрифту: 16px; шрифт-вага: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; кордон-радіус: 25px; box-shadow: вставка 0 2px 8px rgba (0,0,0,0.3); 
 Тут ми знову скористалися деклараціями кордону-радіусу і box-shadow. У випадку текстових полів радіусу кордону надається більш високе значення для забезпечення більшої кривизни. У випадку оголошення тіні коробки, ключове слово inset було використано для вказівки, що тінь буде знаходитися всередині текстового поля. Тут вертикальне зміщення для тіні становить 2px, і воно має розмиття 8px, колір якого оголошується у форматі rgba.
 Щоб додати деяку інтерактивність до полів введення, ми будемо змінювати властивість box-shadow для поля введення на стан 'hover'. Нова декларація box-shadow має нульові зміщення x і y, але має розмиття 5px, при цьому колір оголошується у форматі rgba.
 5. Кнопка "Надіслати"
 Остаточна частина цієї форми, яку ми повинні виконати, - це кнопка "Надіслати". Подібно до поля вводу, ми надамо кнопці submit радіус 25px, використовуючи властивість border-radius. Властивість box-shadow з y-offset в 1px також була додана, щоб дати кнопку a “внутрішня тінь” ефекту.
  form input [type = 'submit'] float: right; заповнення: 10px 20px; дисплей: блок; курсор: покажчик; розмір шрифту: 16px; шрифт-вага: 700; колір: #fff; текстова тінь: 0 1px 0 # 000; фоновий колір: # 0074CC; кордон: 1px твердий # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; кордон-радіус: 25px; background-image: -moz-лінійний градієнт (зверху, # 08C, # 05C); background-image: -ms-лінійний градієнт (зверху, # 08C, # 05C); background-image: -webkit-лінійний градієнт (зверху, # 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); box-shadow: вставка 0 1px 0px rgba (255, 255, 255, 0.5); 
 Важливо відзначити тут декларацію для додавання градієнта до цієї кнопки. Градієнти CSS3 є досить великою темою, і ми будемо тільки дряпати поверхню. Для цієї кнопки надсилання ми будемо додавати лінійний градієнт, що йде від # 08C до # 05C. Як і всі інші властивості CSS3, які ми використовували до цих пір, ми будемо додавати префікси постачальників "-moz", "-webkit" і "-ms", щоб забезпечити роботу градієнта в різних браузерах.
 6. Демонстрація і завантаження
 Форма для входу тепер завершена. Перегляньте демонстраційну версію, щоб побачити, як виглядає завершена форма. Якщо ви втратили в будь-який момент або не можете продовжити навчальний посібник, не хвилюйтеся, просто завантажте файли на робочий стіл і попрацюйте з існуючим кодом CSS, щоб зрозуміти, як він працює.
 Сподіваюся, вам сподобався цей підручник. Не соромтеся експериментувати з цими функціями і не забувайте ділитися своїми думками.
 Демо
 Завантажити файли
 
Примітка редактора: Цей пост написано Бхарані М для Hongkiat.com. Bharani є дизайнером / розробником з Нью-Делі, Індія. Зараз він працює над Resumonk.com - онлайн-будівельником резюме, який допомагає створити професійне та красиве резюме за лічені хвилини. Також перевірте його бічний проект - Quotescube.com - вашу добову дозу цитат.