Креирање обрасца за пријаву ефеката сложених папира

Овај чланак је део нашег "ХТМЛ5 / ЦСС3 Туториалс сериес" - посвећена да вам помогне да будете бољи дизајнер и / или програмер. Кликните овде да бисте видели више чланака из исте серије.

Формулари за пријаву су битан део сваког динамичког веб сајта. Они пружају механизам за кориснике веб-локације за приступ ограниченом садржају. У овом водичу истражићемо многе ЦСС3 карактеристике као што су тект-схадов, бок-схадов, линеарни градијенти и прелази да бисмо креирали једноставан и елегантан образац за пријаву са изгледом налик на папир..

Слика изнад приказује преглед обрасца за пријаву који ћемо градити. Спремни за роњење? Хајде да почнемо!

1. Основна ХТМЛ ознака

ХТМЛ ознака коју ћемо користити је врло једноставна, након ХТМЛ5 Доцтипе декларације, имамо и </code> ознаке. У оквиру <code><body></code> таг, имамо а <code><section></code> ознака са класом 'стацкед'. Ово <code><section></code> Ознака се користи за дефинисање ширине оквира садржаја и за поравнање са центром странице. Такође ћемо користити име класе овог таг-а да бисмо циљали овај таг помоћу ЦСС-а. А <code><form></code> таг следи <code><section></code> таг. Ознака обрасца нема важећу вриједност за атрибут 'акција', будући да се користи само у сврху демонстрације. Унутар поља обрасца се налазе декларације за ознаке е-поште и лозинке и поље за унос, а затим дугме за слање. Важно је напоменути да смо користили поље за унос са типом 'е-поште'. Ово нам даје ХТМЛ5 декларација и деградира се на обицно поље за унос текста у старијим прегледницима.</p> <p>Ево читаве ХТМЛ ознаке:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Једноставна пријава

  Пријавите се
   Емаил  
   Пассворд

     И ево прегледа онога што смо до сада направили:
  
 2. Додавање основних стилова
 Креирајте нову цсс датотеку мастер.цсс и додајте линк на ову датотеку у главној ХТМЛ датотеци. Ми ћемо покренути ЦСС датотеку са брзим ресетовањем да бисмо добили униформност на различитим претраживачима. Хајде да додамо и лепу позадинску слику нашој страници. Слика коју сам користио је узета СубтлеПаттернс. Слободно прегледајте сајт да бисте пронашли позадинску слику која одговара вашем укусу. Можемо додати позадинску слику уз помоћ сљедеће декларације. Такође имајте на уму да користим Опен Санс фонт из Гоогле Веб Фонта за основни текст.
  / * -------- Основни стилови --------- * / боди, хтмл маргин: 0; паддинг: 0;  боди бацкгроунд: урл ("хттпс://ассетс.хонгкиат.цом/уплоадс/стацк-папер-логин-форм/бг.пнг") лево горње понављање; фонт: 16пк / 1.5 "Опен Санс", Хелветица, Ариал, санс-сериф;  див.врап видтх: 400пк; маргин: 80пк ауто; 
 3. Стацкед-Папер ефекат
 Сада када имамо основни изглед и покретање, можемо почети са дизајнирањем обрасца. За постизање ефекта сложеног папира, користићемо :после и :пре него што псеудо-елементи. Ови псеудо-елементи се углавном користе за додавање визуелних ефеката било ком селектору. 
 Тхе :пре него што псеудо-елемент се користи за додавање садржаја пре садржаја селектора и :после псеудо-елемент за садржај након селектора. 
 Почећемо тако што ћемо дати одељак, са класом 'стацкед', ширином од 400пк и висином од 300пк. Даље, овом пољу ћемо дати боју позадине # ф6ф6ф6 и границу дебљине 1 пиксела са бојом #ббб. Кључна ствар коју треба имати на уму су декларација граничног радијуса и декларација бок-схадов. Овде су "-моз-" и "-вебкит-" префикси прегледача коришћени да би се осигурало да ово функционише у претраживачима заснованим на гецко-у и вебкит-у. 
 Декларација границе-радијуса је веома једноставна и користи се за прављење заобљених углова, са 3пк који представља закривљеност. Синтакса за декларацију бок-схадов може изгледати компликовано, али да је разделимо на мање делове да бисмо је боље разумели. 
  / * -------- Радијус границе --------- * / -вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк; бордер-радиус: 3пк; / * -------- Бок Схадов --------- * / -вебкит-бок-схадов: 0 0 3пк ргба (0,0,0, .2); -моз-бок-схадов: 0 0 3пк ргба (0,0,0, .2); бок-схадов: 0 0 3пк ргба (0,0,0, .2);
 Прва два нула означавају к-оффсет и и-оффсет, а 3пк означава замућење. Следећа је декларација боја. Овде сам користио вредности ргба; ргба означава црвено зелено плаво и алфа (непрозирност). Према томе, 4 вредности унутар заграда указују на количину црвене, зелене, плаве и њене алфа (непрозирности).
  .стацкед бацкгроунд: # ф6ф6ф6; бордер: 1пк солид #ббб; хеигхт: 300пк; маргин: 50пк ауто; позиција: релативна; видтх: 400пк; -вебкит-бок-схадов: 0 0 3пк ргба (0,0,0, .2); -моз-бок-схадов: 0 0 3пк ргба (0,0,0, .2); бок-схадов: 0 0 3пк ргба (0,0,0, .2); -вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк; бордер-радиус: 3пк; 
 Сада када смо креирали основни гранични оквир за форму, хајде да почнемо са :после и :пре него што псеудо-елементи. 
  .стацкед: афтер, .стацкед: бефоре бацкгроунд: # ф6ф6ф6; бордер: 1пк солид #ааа; боттом: -8пк; цонтент: "; хеигхт: 250пк; лево: 2пк; позициа: абсолутно; ширина: 394пк; з-индек: -10; -вебкит-бок-схадов: 0 0 3пк ргба (0,0,0, .2); - моз-бок-схадов: 0 0 3пк ргба (0,0,0, .2); бок-схадов: 0 0 3пк ргба (0,0,0, .2); -вебкит-бордер-радиус: 3пк; моз-бордер-радиус: 3пк; бордер-радиус: 3пк; .стацкед: бефоре боттом: -14пк; лево: 5пк; ширина: 388пк; -вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк ; бордер-радиус: 3пк; -вебкит-бок-схадов: 0 0 15пк ргба (0,0,0,0,5); -моз-бок-схадов: 0 0 15пк ргба (0,0,0,0,5); -схадов: 0 0 15пк ргба (0,0,0,0,5);
 Код за: после и: пре псеудо-елемената је скоро потпуно сличан оном у граничном оквиру који је горе описан. Једина важна ствар коју треба напоменути је да су ти псеудо-елементи позиционирани апсолутно у односу на гранични оквир. Сваки од псеудо-елемената се прогресивно спушта за неколико пиксела да би се добио изглед налик на папир.
 4. Поља за унос
 У ХТМЛ ознаци, додали смо класу „уноса текста“ у поље за е-пошту и поље за лозинку како бисмо могли лако да циљамо ове елементе помоћу наших ЦСС декларација. Ево ЦСС декларације која се примењује на оба поља за унос.
  форм инпут.тект-инпут оутлине: 0; дисплеј блок; видтх: 330пк; паддинг: 8пк 15пк; бордер: 1пк солид греи; фонт-сизе: 16пк; тежина фонта: 400; -вебкит-бордер-радиус: 25пк; -моз-бордер-радиус: 25пк; радијус: 25пк; бок-схадов: инсет 0пк 8пк ргба (0,0,0,0.3); 
 Овде смо поново користили декларације о граници-радијусу и бок-схадову. У случају текстуалних поља, радијус границе добија већу вриједност како би се осигурала већа закривљеност. У случају бок-схадов декларације, кључна реч инсет је коришћена за одређивање да ће сенка бити унутар текстуалног поља. Овде, вертикални офсет за сенку је 2пк и има замућење од 8пк, а боја се декларише коришћењем ргба формата.
 Да би додали нешто интерактивности у поља за унос, променићемо својство бок-схадов за поље за унос у стање "ховер". Нова декларација бок-схадов има нула к и и одступања, али има 5пк замућење, са бојом која се декларише у ргба формату.
 5. дугме за слање
 Последњи део овог обрасца који морамо да попунимо је дугме за слање. Слично пољу за унос, ми ћемо дати гумб за слање радијусом од 25 пиксела користећи својство бордер-радиус. Такође је додато својство бок-схадов са и-оффсет-ом од 1пк да би дало дугме ан “Унутрашња сенка” ефекат.
  форм инпут [типе = 'субмит'] флоат: десно; паддинг: 10пк 20пк; дисплеј блок; курсор: показивач; фонт-сизе: 16пк; фонт-веигхт: 700; цолор: #ффф; тект-схадов: 0 1пк 0 # 000; бацкгроунд-цолор: # 0074ЦЦ; бордер: 1пк солид # 05Ц; -вебкит-бордер-радиус: 25пк; -моз-бордер-радиус: 25пк; радијус: 25пк; бацкгроунд-имаге: -моз-линеар-градиент (топ, # 08Ц, # 05Ц); бацкгроунд-имаге: -мс-линеар-градиент (топ, # 08Ц, # 05Ц); бацкгроунд-имаге: -вебкит-линеарни градијент (топ, # 08Ц, # 05Ц); бацкгроунд-имаге: линеарни градијент (врх, # 08Ц, # 05Ц); -вебкит-бок-схадов: инсет 0пк 0пк ргба (255, 255, 255, 0.5); -моз-бок-схадов: инсет 0пк 0пк ргба (255, 255, 255, 0.5); бок-схадов: инсет 0 1пк 0пк ргба (255, 255, 255, 0.5); 
 Важно је напоменути декларацију за додавање градијента овом дугмету. ЦСС3 градијенти су прилично велика тема и само ћемо гребати површину. За ово дугме за слање, додаћемо линеарни градијент од # 08Ц до # 05Ц. Као и са свим осталим ЦСС3 својствима које смо до сада користили, додаћемо "-моз", "-вебкит" и "-мс" префиксима добављача да бисмо осигурали да градијент функционише у различитим претраживачима.
 6. Демо и Довнлоад
 Наш образац за пријаву је сада завршен. Погледајте демо да видите како изгледа попуњени образац. Ако сте изгубљени у било ком тренутку или нисте могли да пратите упутство, не брините, само преузмите датотеке на радну површину и покрените постојећи ЦСС код да бисте разумели како функционише.
 Надам се да сте уживали у овом туториалу. Слободно експериментишите са овим функцијама и не заборавите да поделите своје мисли.
 Демо
 Довнлоад Филес
 
Напомена уредника: Овај пост је написао / ла Бхарани М фор Хонгкиат.цом. Бхарани је дизајнер / девелопер из Њу Делхија, Индија. Тренутно ради на Ресумонк.цом - он-лине градитељу животописа који вам помаже да направите професионални и лијепи животопис за неколико минута. Такође проверите његов споредни пројекат - Куотесцубе.цом - вашу дневну дозу цитата.