Један од најважнијих одељака сваке веб странице је образац за контакт, који може бити једноставан као што је додавање неколико једноставних поља и дугмета за слање ових унетих података, али увек можемо отићи мало даље и ако смо креативни, применимо образац за контакт који не само да испуњава своју инхерентну функционалност, већ пружа и визуелни ефекат прилагођен кориснику.
Погледајмо кораке које треба следити за имплементацију овог обрасца који ће симулирати коверту која ће приликом преласка курсором миша омогућити кориснику да попуни податке унутар онога што ће бити слово, а све то уз употребу ХТМЛ И ЦСС3.
Средства или ресурси
Прво морамо имати коверту на којој ће бити наше писмо, за то ћемо користити две различите слике, једну са врха коверте и другу одоздо, што ће нам у комбинацији са прелазима дати жељени ефекат.
Као што видимо, они уопште нису компликовани, међутим, ове слике се налазе у спремишту створеном за овај пример које ћете пронаћи на крају водича у одговарајућој вези за преузимање.
Конструкција образаца
Прво ћемо креирати ХТМЛ датотеку која ће се звати цонтацт_форм.хтмл који ће садржати наш образац као такав и укључивање .цсс датотеке која ће бити задужена за руковање његовим стиловима, као и за прелазе, да видимо како то изгледа:
Контакт формуларСада само треба да креирамо наш .цсс који се зове стилови.цсс и ту постављамо стилове за наш облик и користимо прелазе за генерисање жељеног ефекта, прво ћемо мало променити изглед нашег тела како бисмо му дали изглед слова:Здраво!
Порука:Унесите своје податке
Име: Емаил:
боди {бацкгроунд: #ццц урл ('имг / бг_царта_фуера.пнг'); боја: # 7ц7873; фонт-фамили: 'хелветица';} п {тект-схадов: 0 1пк 0 #ффф; фонт-сизе: 24пк;} # врап {видтх: 530пк; маргина: 20пк ауто 0; висина: 1000пк;} х1 {маргин-боттом: 20пк; тект-алигн: центер; фонт-сизе: 48пк; тект-схадов: 0 1пк 0 # еде8д9; }Када се ово уради, ми ћемо имплементирати прелазе у див који садржи образац за ово који ћемо користити прелаз у различитим варијантама за сваки прегледач и са вредношћу лакоћа уласка Даћемо вам ефекат спорог почетка и краја:
#форм_врап {оверфлов: хидден; висина: 446пк; положај: релативан; врх: 0пк; -вебкит-транзиција: све 1с олакшање-у-оут .3с; -моз-транзиција: све 1с еаси-ин-оут .3с; -о-прелазак: све 1с олакшање-у-оут .3с; прелаз: све 1с олакшање-у-оут .3с;}Сада са псеудо елементима пре него што И деспуес де употпунићемо ефекат писма које излази из коверте, да видимо:
#форм_врап: бефоре {цонтент: ""; положај: апсолутан; дно: 128пк; лево: 0пк; бацкгроунд: урл ('имг / бефоре.пнг'); видтх: 530пк; хеигхт: 316пк;} #форм_врап: афтер {цонтент: ""; поситион: абсолуте; дно: 0пк; лево: 0; бацкгроунд: урл ('имг / афтер.пнг'); ширина: 530пк; висина: 260пк; }На крају, дугмету за слање додајемо неке стилове како бисмо контролисали и приказ и ефекте на њему:
#форм_врап инпут [типе = субмит] {поситион: релативе; фонт-фамили: 'хелветица'; фонт-сизе: 24пк; цолор: # 7ц7873; тект-схадов: 0 1пк 0 #ффф; ширина: 100%; поравнање текста: центар; непрозирност: 0; позадина: нема; курсор: показивач; -моз-бордер-радиус: 3пк; -вебкит-бордер-радиус: 3пк; бордер-радиус: 3пк; -вебкит-транзиција: непрозирност .6с лакоћа уласка-излаза 0с; -моз-транзиција: непрозирност .6с лакоћа уласка-излаза 0с; -о-прелазак: непрозирност .6с лакоћа уласка-излаза 0с; прелаз: непрозирност .6с лакоћа улаза 0с; } #форм_врап: ховер инпут [типе = субмит] {з-индек: 1; непрозирност: 1; -вебкит-транзиција: непрозирност .5с лакоћа уласка 1.3с; -моз-транзиција: непрозирност .5с лакоћа уласка-излаза 1.3с; -о-прелазак: непрозирност .5с лакоћа уласка-излаза 1.3с; прелаз: непрозирност .5с лакоћа уласка 1.3с;}Па да видимо како изгледа наш почетни образац за контакт када га покренемо у прегледачу:
ЕНЛАРГЕ
Ако пређемо курсором миша преко њега, видећемо функционалност приказане форме да бисмо могли да уносимо податке и шаљемо:
ЕНЛАРГЕ
Као што видимо, конструкција овог обрасца била је прилично једноставна, а најбоље од свега је што нисмо везани за било коју вањску библиотеку, па је њена имплементација прилично једноставна на било којој веб страници, остаје само свима да прошире примјер и изводе функционалност коју шаљем користећи неки програмски језик, као што је ПХП, Руби, Питхон или чак Ноде.јс.
