Създаване на формуляр за влизане в хартиен стик

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

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

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

1. Основна HTML маркировка

HTML маркировката, която ще използваме е много проста, след декларацията HTML5 Doctype имаме и </code> тагове. В рамките на <code><body></code> tag, имаме a <code><section></code> етикет с клас „натрупани“. Това <code><section></code> tag се използва за определяне на ширината на полето за съдържание и за подравняването му към центъра на страницата. Ще използваме и името на класа на този маркер, за да насочим този маркер с помощта на CSS. А <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 файл с бързо нулиране, за да постигнем еднаквост в различните браузъри. Нека добавим и хубаво фоново изображение към нашата страница. Изображението, което използвах, е взето от SubtlePatterns. Чувствайте се свободни да разглеждате сайта, за да намерите фоново изображение, което отговаря на вашия вкус. Можем да добавим фоновото изображение с помощта на следната декларация. Също така имайте предвид, че използвам Отворете 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, sans-serif;  div.wrap width: 400px; марж: 80px авто; 
 3. Ефект на подредена хартия
 Сега, когато имаме основното оформление и работим, нека да започнем с проектирането на формуляра. За постигане на ефекта на хартиен носител, ще използваме :след и :преди псевдо-елементи. Тези псевдо-елементи се използват най-вече за добавяне на визуални ефекти към всеки селектор. 
 Най- :преди псевдо-елементът се използва за добавяне на съдържание преди съдържанието на селектора и :след псевдо-елемент за съдържание след селектор. 
 Ще започнем с даване на раздела, с клас "натрупани", с ширина 400px и височина 300px. Освен това ще дадем на тази кутия фонов цвят # f6f6f6 и граница с дебелина 1 пиксел с цвят #bbb. Ключовите неща, които трябва да се отбележат тук са декларацията за радиус на границата и декларацията за сянката в сянка. Тук са използвани префикси на браузъра „-moz-“ и „-webkit-“, за да се гарантира, че това работи в браузъри, базирани на gecko и webkit. 
 Декларацията на граничния радиус е много проста и се използва за създаване на заоблени ъгли, като 3px представлява кривината. Синтаксисът на декларацията за сянка може да изглежда сложен, но нека го разделим на по-малки парчета, за да го разберем по-добре. 
  / * -------- Радиус на границата --------- * / -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 означава червено-зелено синьо и алфа (непрозрачност). Така че четирите стойности в скобите показват количеството червено, зелено, синьо и неговата алфа (непрозрачност).
  .натрупани фон: # f6f6f6; граница: 1px твърдо # bbb; височина: 300px; марж: 50px авто; позиция: относителна; ширина: 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); -bubkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 3px; 
 Сега, след като създадохме основната ограничителна кутия за формуляра, нека да започнем с :след и :преди псевдо-елементи. 
  .натрупани: след, .stacked: преди background: # f6f6f6; граница: 1px твърдо #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); поле-сянка: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; moz-border-radius: 3px; радиус на границата: 3px; .сграден: преди bottom: -14px; left: 5px; ширина: 388px; -bubkit-border-radius: 3px; -moz-border-radius: 3px -bind-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 outline: 0; дисплей: блок; ширина: 330px; пълнеж: 8px 15px; граница: 1px плътно сиво; размер на шрифта: 16px; тегло на шрифта: 400; -Вебик-граничен радиус: 25px; -moz-border-radius: 25px; граничен радиус: 25px; box-shadow: вмъкване 0 2px 8px rgba (0,0,0,0.3); 
 Тук отново използваме декларациите за граничния радиус и полето-сянка. В случай на текстови полета, радиуса на границата се дава по-висока стойност, за да се гарантира по-голяма кривина. В случай на декларация на скритата сянка, ключовата дума inset е била използвана, за да укаже, че сянката ще бъде в текстовото поле. Тук вертикалното отместване за сянката е 2px и има размазване от 8 пиксела, като цветът се декларира с помощта на формата rgba.
 За да добавим някаква интерактивност към полетата за въвеждане, ще променим свойствата box-shadow за полето за въвеждане в състоянието 'hover'. Новата декларация на кутията-сянка има нула x и y компенсации, но има 5px размазване, като цветът се декларира в rgba формат.
 5. Бутон за изпращане
 Последната част от този формуляр, която трябва да попълним, е бутона за изпращане. Подобно на полето за въвеждане, ще дадем на бутона за подаване радиус от 25px, използвайки свойството border-radius. Свойство box-shadow с y-offset от 1px също е добавено, за да даде бутон an “вътрешната сянка” ефект.
  форма за въвеждане [type = 'submit'] float: right; подплата: 10px 20px; дисплей: блок; курсор: указател; размер на шрифта: 16px; тегло на шрифта: 700; цвят: #fff; текстова сянка: 0 1px 0 # 000; фонов цвят: # 0074CC; граница: 1px твърдо # 05C; -Вебик-граничен радиус: 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 код, за да разберете как работи.
 Надявам се, че ви хареса този урок. Чувствайте се свободни да експериментирате с тези функции и не забравяйте да споделяте мислите си.
 Демонстрация
 Изтегляне на файлове
 
Бележка на редактора: Тази публикация е написана от Bharani M за Hongkiat.com. Bharani е дизайнер / разработчик от Ню Делхи, Индия. В момента работи върху Resumonk.com - онлайн създател на автобиографии, който ви помага да създадете професионално и красиво резюме за минути. Също така проверете неговия страничен проект - Quotescube.com - вашата дневна доза от кавички.