Креирање стилског одговарајућег обрасца помоћу ЦСС3 и ХТМЛ5

Кодирање са ЦСС3 је драматично променило пејзаж унутар фронтенд веб развоја. Постоји више могућности за изградњу јединствених интерфејса са градијентима, падовима сенки и заобљеним угловима. Сви ови ефекти полако постају усвојени у сваком већем веб претраживачу.

У овом туториалу желим да прикажем многе од ових цоол ЦСС3 ефеката. Направио сам једноставан веб образац користећи неке од нових типова ХТМЛ5 улаза. Распоред такође одговара; прилагодит ће се како се величина прозора смањује. Ова ситуација је савршена за израду веб образаца за подршку корисницима паметних телефона.

Погледајте изворни код и погледајте да ли можете пратити структуру фајлова. Такође, слободно прилагодите ове елементе и копирајте их на своје веб странице.

Демо
Преузмите изворни код

Изградња структуре образаца

За почетак сам направио главни фајл индек.хтмл заједно са два одвојена листа стилова. стиле.цсс садржи све подразумеване селекторе док респонсиве.цсс обрађује различите величине прозора. Мој доцтипе је ХТМЛ5 и ја сам омотао цијели образац у контејнер

Овај пример само показује ефекте које можете манифестовати приликом кодирања у ЦСС3. Стога немамо скрипту за слање постова или одредиште за преусмјеравање корисника. Мој код у наставку садржи уводне ознаке за првих неколико елемената форме.

Прва област блока је омотана у ознаку секције тако да можемо да плутамо распоред један поред другог. Лева колона садржи све ове уносе: текст, е-маил, УРЛ и телефонски број. Када прегледате телефон, приказ на тастатури треба да се прилагоди на основу типа уноса. Постоји много добрих разлога да подржите ове функције за мобилне телефоне, јер сви данас раде у покрету.

Елемент тектареа такође може имати текст резервисаног места дефинисан на пагелоад. Ово је слично ознаци која нестаје када корисник унесе неки текст у поље. Атрибут који се не преноси је аутоцомплете зато што текстуални простори обично не попуњавају одговарајући садржај.

Контроле бочне траке

Желео сам да направим овај образац тако да би на одговарајући начин реаговао на промену величине приказа прозора. Када је прозор довољно пун, обе улазне колоне лебде једна поред друге. Али ако се ширина мало изрезује, десна страна пада испод главног садржаја.

Ево мог ХТМЛ-а за област бочне траке:

   Прималац:
  
  Приоритет:
   Лов    Средње    Високо

Овај код заправо није ништа превише збуњујуће. Само једноставна опција бира мени и неке радио тастере. Додатно, након ових објеката поставила сам ресет и субмит дуг на крају секције.

Све ово изгледа добро и добро, па сада пређимо на нека ЦСС својства. Постоји толико много прилагођавања које можете применити када радите на елементима обрасца. Покушајте да се не преплавите превише размишљања и забаве!

Аниматед Бок Схадовс

Примијетит ћете како картете кроз сваки од главних улазних елемената које сам анимирао шарену вањску сјену. Гоогле Цхроме има својство структуре које чини нешто слично, али не баш екстравагантно. Овај мали дио сучеља привлачи посјетитеље који први пут долазе.

 / ** елементи форме ** / # хонгкиат-форм бок-сизинг: бордер-бок;  # хонгкиат-форм .тктинпут дисплаи: блоцк; фамилија фонтова: "Хелветица Неуе", Ариал, санс-сериф; гранични стил: солид; бордер-видтх: 1пк; бордер-цолор: #дедеде; маргин-боттом: 20пк; фонт-сизе: 1.55ем; паддинг: 11пк 25пк; паддинг-лефт: 55пк; ширина: 90%; цолор: # 777; бок-схадов: 0 1пк 3пк ргба (0, 0, 0,1) инсет; -моз-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет; -вебкит-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет; прелаз: гранични 0.15с линеарни 0с, бок-схадов 0.15с линеарни 0с, боја 0.15с линеарни 0с; -вебкит-транситион: бордер 0.15с линеар 0с, бок-схадов 0.15с линеар 0с, цолор 0.15с линеар 0с; -моз-транситион: бордер 0.15с линеар 0с, бок-схадов 0.15с линеар 0с, цолор 0.15с линеар 0с; -о-транзиција: гранична 0.15с линеарна 0с, бок-схадов 0.15с линеарна 0с, боја 0.15с линеарна 0с;  # хонгкиат-форм .тктинпут: фоцус цолор: # 333; бордер-цолор: ргба (41, 92, 161, 0.4); бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (41, 92, 161, 0.6); -моз-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (41, 92, 161, 0.6); -вебкит-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (41, 92, 161, 0.6); оутлине: 0 ноне;

Да би циљали сваки елемент текста користио сам класу .тктинпут. Свака од транзицијских особина ради на граници, кутији-сенци и боји. Ја користим бок-сизинг: гранични-бок; на контејнеру тако да паддинг не упропасти наш одговарајући дизајн.

Морао сам да копирам преко тих истих стилова и да их мало уредим за текст. Променио сам неке од падова и маргина и додао јединствену икону позадине.

 # хонгкиат-форм тектареа дисплаи: блоцк; фамилија фонтова: "Хелветица Неуе", Ариал, санс-сериф; гранични стил: солид; бордер-видтх: 1пк; бордер-цолор: #дедеде; маргин-боттом: 15пк; фонт-сизе: 1.5ем; паддинг: 11пк 25пк; паддинг-лефт: 55пк; ширина: 90%; хеигхт: 180пк; цолор: # 777; бок-схадов: 0 1пк 3пк ргба (0, 0, 0,1) инсет; -моз-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет; -вебкит-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет; прелаз: гранични 0.15с линеарни 0с, бок-схадов 0.15с линеарни 0с, боја 0.15с линеарни 0с; -вебкит-транситион: бордер 0.15с линеар 0с, бок-схадов 0.15с линеар 0с, цолор 0.15с линеар 0с; -моз-транситион: бордер 0.15с линеар 0с, бок-схадов 0.15с линеар 0с, цолор 0.15с линеар 0с; -о-транзиција: гранична 0.15с линеарна 0с, бок-схадов 0.15с линеарна 0с, боја 0.15с линеарна 0с;  # хонгкиат-форм тектареа: фоцус цолор: # 333; бордер-цолор: ргба (41, 92, 161, 0.4); бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (40, 90, 160, 0.6); -моз-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (40, 90, 160, 0.6); -вебкит-бок-схадов: 0 1пк 3пк ргба (0, 0, 0, 0.1) инсет, 0 0 8пк ргба (40, 90, 160, 0.6); оутлине: 0 ноне;  # хонгкиат-форм тектареа.тктблоцк бацкгроунд: #ффф урл ('хттпс://ассетс.хонгкиат.цом/уплоадс/респонсиве-цсс3-форм/спеецх.пнг') 5пк 4пк но-репеат;

Сидебар Инпутс

Радио гумби и одабране ставке менија су много једноставнији. На ове елементе можете применити ефекте спољног сјаја и сличне сенке, али то не изгледа увек добро. Алтернативно, дизајнери ће креирати корисничке интерфејсе и приложити их као позадинске слике. Међутим, ово може захтевати решење за решавање јКуери проблема како би опције биле исправно приказане.

 спан.радиобадге дисплаи: блоцк; маргин-боттом: 8пк;  спан.радиобадге лабел фонт-сизе: 1.2ем; паддинг-боттом: 4пк;  селецт.селмену фонт-сизе: 17пк; цвет: # 676767; паддинг: 9пк! бордер: 1пк солид #ааа; видтх: 200пк;

Нисам много урадио да их одгурнем од главних улазних елемената. Много додатних додатака је важно како би се корисници осјећали угодно у интеракцији с обрасцем. Када је текст супер мален, то може бити борба само за испуњавање сваког дијела. Нека ваш фонт буде велик, али не толико велик да преплављује страницу.

Цустомизед Буттонс

Тастери ресет и субмит су дизајнирани у својој класи. Направио сам сет свјетлосних градијента који се добро слажу са плавим истакнутим елементима у нашим пољима обрасца.

Испод је мој ЦСС код за дугме субмит на стандардном и ховер стању.

 #буттонс #субмитбтн дисплаи: блоцк; флоат: лефт; хеигхт: 3ем; паддинг: 0 1ем; бордер: 1пк солид; оутлине: 0; фонт-веигхт: болд; фонт-сизе: 1.3ем; цолор: #ффф; текст-сенка: 0пк 1пк 0пк # 222; вхите-спаце: новрап; ворд-врап: нормал; вертикално поравнавање: средина; курсор: показивач; -моз-бордер-радиус: 2пк; -вебкит-бордер-радиус: 2пк; бордер-радиус: 2пк; бордер-цолор: # 5е890а # 5е890а # 000; -моз-бок-схадов: инсет 0 1пк 0 ргба (256,256,256, .35); -мс-бок-схадов: инсет 0 1пк 0 ргба (256,256,256, .35); -вебкит-бок-схадов: инсет 0 1пк 0 ргба (256,256,256, .35); бок-схадов: инсет 0 1пк 0 ргба (256,256,256, .35); бацкгроунд-цолор: ргб (226,238,175); бацкгроунд-имаге: -моз-линеар-градиент (топ, ргб (226,238,175) 3%, ргб (188,216,77) 3%, ргб (144,176,38) 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (3%, ргб (226,238,175)), боја-стоп (3%, ргб (188,216,77)), боја-стоп (100 %, ргб (144,176,38))); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, ргб (226,238,175) 3%, ргб (188,216,77) 3%, ргб (144,176,38) 100%); бацкгроунд-имаге: -о-линеарно-градијент (топ, ргб (226,238,175) 3%, ргб (188,216,77) 3%, ргб (144,176,38) 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, ргб (226,238,175) 3%, ргб (188,216,77) 3%, ргб (144,176,38) 100%); бацкгроунд-имаге: линеарно-градијент (топ, ргб (226,238,175) 3%, ргб (188,216,77) 3%, ргб (144,176,38) 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# е2ееаф", ендЦолорстр = "# 90б026", ГрадиентТипе = 0);  #буттонс #субмитбтн: ховер, #буттон #субмитбтн: ацтиве бордер-цолор: # 7ц9826 # 7ц9826 # 000; цолор: #ффф; -моз-бок-схадов: инсет 0 1пк 0 ргба (256,256,256,0.4), 0 1пк 3пк ргба (0,0,0,0,5); -мс-бок-схадов: инсет 0 1пк 0 ргба (256,256,256,0.4), 0 1пк 3пк ргба (0,0,0,0,5); -вебкит-бок-схадов: инсет 0 1пк 0 ргба (256,256,256,0.4), 0 1пк 3пк ргба (0,0,0,0,5); бок-схадов: инсет 0 1пк 0 ргба (256,256,256,0.4), 0 1пк 3пк ргба (0,0,0,0,5); позадина: ргб (228,237,189); бацкгроунд: -моз-линеар-градиент (топ, ргб (228,237,189) 2%, ргб (207,219,120) 3%, ргб (149,175,54) 100%); бацкгроунд: -вебкит-градиент (линеарно, лево горе, лево дно, боја-стоп (2%, ргб (228,237,189)), боја-стоп (3%, ргб (207,219,120)), боја-стоп (100%, ргб ( 149,175,54))); бацкгроунд: -вебкит-линеар-градиент (топ, ргб (228,237,189) 2%, ргб (207,219,120) 3%, ргб (149,175,54) 100%); бацкгроунд: -о-линеарни градијент (топ, ргб (228,237,189) 2%, ргб (207,219,120) 3%, ргб (149,175,54) 100%); бацкгроунд: -мс-линеар-градиент (топ, ргб (228,237,189) 2%, ргб (207,219,120) 3%, ргб (149,175,54) 100%); бацкгроунд: линеарно-градијент (топ, ргб (228,237,189) 2%, ргб (207,219,120) 3%, ргб (149,175,54) 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# е4едбд", ендЦолорстр = "# 95аф36", ГрадиентТипе = 0);

Готово је немогуће одржати овај тип селектора чистим! Постоји једноставно превише својстава која су вам потребна за пописивање и подршку за многе старије старије прегледаче. Интернет Екплорер може чак да прикаже ове градијенте са одговарајућим филтером. Обратите пажњу, осим на позадинске градијенте, и на нову боју обруба, заобљене углове и кутију на ховер.

Дугме за поништавање изгледа слично, али сам кренуо потпуно другачије са шемом боја. Светло сива има тенденцију да падне у позадину у односу на светло зелене боје. Наш дугме за ресетовање се вероватно неће много користити, тако да му не треба сва пажња.

 #буттонс #ресетбтн дисплаи: блоцк; флоат: лефт; цолор: # 515151; текст-сенка: -1пк 1пк 0пк #ффф; маргин-ригхт: 20пк; хеигхт: 3ем; паддинг: 0 1ем; оутлине: 0; фонт-веигхт: болд; фонт-сизе: 1.3ем; вхите-спаце: новрап; ворд-врап: нормал; вертикално поравнавање: средина; курсор: показивач; -моз-бордер-радиус: 2пк; -вебкит-бордер-радиус: 2пк; бордер-радиус: 2пк; бацкгроунд-цолор: #ффф; бацкгроунд-имаге: -моз-линеар-градиент (топ, ргб (255,255,255) 2%, ргб (240,240,240) 2%, ргб (222,222,222) 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (2%, ргб (255,255,255)), боја-стоп (2%, ргб (240,240,240)), боја-стоп (100%, ргб (222,222,222))); бацкгроунд-имаге: -вебкит-линеарни градијент (топ, ргб (255,255,255) 2%, ргб (240,240,240) 2%, ргб (222,222,222) 100%); бацкгроунд-имаге: -о-линеарно-градијент (топ, ргб (255,255,255) 2%, ргб (240,240,240) 2%, ргб (222,222,222) 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, ргб (255,255,255) 2%, ргб (240,240,240) 2%, ргб (222,222,222) 100%); бацкгроунд-имаге: линеарни градијент (топ, ргб (255,255,255) 2%, ргб (240,240,240) 2%, ргб (222,222,222) 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# фффффф", ендЦолорстр = "# дедеде", ГрадиентТипе = 0); бордер: 1пк солид # 969696; бок-схадов: 0 1пк 2пк ргба (144, 144, 144, 0.4); -моз-бок-схадов: 0 1пк 2пк ргба (144, 144, 144, 0.4); -вебкит-бок-схадов: 0 1пк 2пк ргба (144, 144, 144, 0.4); тект-схадов: 0 1пк 1пк ргба (255, 255, 255, 0,75);  #буттонс #ресетбтн: ховер тект-схадов: 0 1пк 1пк ргба (255, 255, 255, 0,75); цолор: # 818181; бацкгроунд-цолор: #ффф; бацкгроунд-имаге: -моз-линеар-градиент (топ, ргб (255,255,255) 2%, ргб (244,244,244) 2%, ргб (229,229,229) 100%); бацкгроунд-имаге: -вебкит-градијент (линеарни, леви врх, леви дно, боја-стоп (2%, ргб (255,255,255)), боја-стоп (2%, ргб (244,244,244)), боја-стоп (100%, ргб (229,229,229))); бацкгроунд-имаге: -вебкит-линеар-градиент (топ, ргб (255,255,255) 2%, ргб (244,244,244) 2%, ргб (229,229,229) 100%); бацкгроунд-имаге: -о-линеар-градиент (топ, ргб ( 255.255.255) 2%, ргб (244,244,244) 2%, ргб (229,229,229) 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, ргб (255,255,255) 2%, ргб (244,244,244) 2%, ргб (229,229,229) 100%); бацкгроунд-имаге: линеарно-градијент (топ, ргб (255,255,255) 2%, ргб (244,244,244) 2%, ргб (229,229,229) 100%); филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# фффффф", ендЦолорстр = "# е5е5е5", ГрадиентТипе = 0); бордер-цолор: #аеаеае; бок-схадов: инсет 0 1пк 0 ргба (256,256,256,0.4), 0 1пк 3пк ргба (0,0,0,0,5);

Можете чак и испустити тип за ресетовање и користити ову белу / сиву схему боја као главни гумб за слање. Користио сам много истих стилова градијента и ефекте сенке, заједно са текстуалном сенком за унутрашњу ознаку. То дефинитивно пружа другачији осјећај за корисничко искуство.

Одговарајуће измене изгледа

Померајући се у мој други ЦСС фајл можемо да погледамо једноставне одговорне медијске упите које сам поставио. Сваки прозор прегледника изнад 800пк ће искусити цео интерфејс бочне траке. Како долазите испод овог прага, лева колона се проширује на 100% ширине и видите елементе бочне траке који падају испод.

 @медиа екран и (мак-видтх: 800пк) боди паддинг: 10пк 15пк;  #цонтаинер видтх: 100%;  # хонгкиат-форм #алигнед видтх: 100%; флоат: ноне; дисплеј блок;  # хонгкиат-форм #асиде ширина: 100%; дисплеј блок; флоат: ноне;  # хонгкиат-форм .тктинпут, # хонгкиат-форм тектареа ширина: 85%;  #приоритицасе флоат: лево; дисплеј блок;  #реципиентцасе флоат: лефт; дисплеј блок; маргин-ригхт: 55пк;

Како се приближавамо величинама, покушавам да прилагодим сваки од улазних форми. Својство ширине може завршити дуже од саме веб странице, а онда имамо улазне форме које стрше преко ивице. Ово се дешава око 550 пиксела, где сам разбио следећи упит, заједно са обе резолуције екрана иПхоне екрана за портрет и пејзаж.

 / * мањи екран дропофф ******* / @медиа само екран и (мак-видтх: 550пк) # хонгкиат-форм .тктинпут, # хонгкиат-форм тектареа видтх: 80%;  / * иПхоне Ландсцапе ******** / @медиа онли сцреен анд (мак-видтх: 480пк) боди паддинг: 10пк 0пк;  селецт.селмену видтх: 190пк;  / * иПхоне портрет ******* / @медиа само екран и (мак-видтх: 320пк) боди паддинг: 10пк 0пк;  # хонгкиат-форм .тктинпут, # хонгкиат-форм тектареа ширина: 70%;  # хонгкиат-форм #алигнед оверфлов: хидден;  селецт.селмену видтх: 160пк;  #реципиентцасе маргин-ригхт: 30пк;

Хоризонтални режим пејзажа и даље добро држи све заједно. Направио сам само изборник падајућег изборника мало тањи да би направили мјеста за радио гумбе. У портретном приказу, променио сам све елементе на много мање ширине. Сада наш код неће покварити чак ни прозоре претраживача који су промењени. Али лепо је имати и подршку за иОС / Андроид паметне телефоне.

Демо
Преузмите изворни код

Закључак

Надам се да је овај водич био информативан у објашњавању колико се може урадити на вашим веб-обрасцима. Нова ЦСС3 својства су довољно снажна да изграде потпуно функционалне анимације са само неколико редова кода. То је заиста узбудљиво време за рад у веб развоју и праћење ових трендова.

Ако имате идеје или сугестије о туториал коду, слободно их подијелите с нама путем поља за коментаре испод.