Ако постоји нешто што је обично врло често за било коју врсту веб странице, ово су обрасци. Обрасци које користимо за попуњавање података за контакт, унесите податке о банци, пријавите се на друштвену мрежу или једноставно извршите претрагу попут оне коју свакодневно вршимо у Гоогле претраживачу.
Дакле, данас ћемо вам показати 40 образаца у ЦСС-у почев од образаца за контакт, плаћања на кредитној картици, пријављивања, једноставних претплата или чак валидације. Низ облика сјајне елеганције и стила који дају посебну поенту вашој веб локацији, без обзира на тему.
Минималистички образац за контакт
Једноставан образац за контакт са велика разноликост ефеката као што су плутајући знакови или анимације линија. Елегантан ЦСС код са мало ЈаваСцрипт-а. Ако тражите минималистички образац за контакт ово је савршено за вас.
Минималистички облик
Други минимална форма, мада само у ЦСС-у да буде а једноставна и високо ефектна форма. Нема минималистичке анимације претходне, али врло добро испуњава свој циљ.
Винтаге контакт образац
Винтаге контакт образац, врло елегантан дизајн. Прилагодљиво за те веб локације да се види са мобилног, иако не укључује валидацију.
Образац за контакт са писмом
ово контакт формулар има прилично радозналу анимацију: формира се писмо. Једноставно, али врло корисно са пуно боја.
Проширени контакт образац
ово проширени контакт образац То је само предњи крај и има валидација са јКуери. Кликнемо на плутајуће дугме и образац ће се појавити са живописном анимацијом. Изванредан.
УИ контакт обрасца
УИ контакт обрасца то је образац направљен у ХТМЛ-у и ЦСС-у. Издваја се по томе што је једноставна контакт картица које можемо попунити тако да се мења само текстуално поље када се на њега кликне.
Плаћање платном картицом
Un плаћање платном картицом направљени у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у који одликује се ротирајућом анимацијом кредитну картицу када притиснемо на поље ЦВЦ или сигурносни број.
Раван дизајн кредитне картице
Чисти ЦСС за а плаћање за кредитне картице у равним бојама. Шарено и врло једноставно, способно да означи квалитет и професионалност.
Кориснички интерфејс кредитне картице
Још једна кредитна картица у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у која се истиче колико је добра изабрао целокупан дизајн. Заборавили смо на анимације у овом делу кода за вашу веб локацију. Преузмите је на овом линку.
Реацт Цхецкоут
Реацт Цхецкоут, направљен са Реацт.јс, одликује се бочну слику коју можемо прилагодити са услугама или производима које продајемо у нашој е-трговини.
Платна картица за плаћање
Ова наплата се издваја по могућности стављања слике на картицу. А. једноставна и јасна форма направљена са ЦСС3, ХТМЛ5 и мало јКуери-а. Квалитетни и другачији од осталих каса на овој листи. Можете преузети овде ову наплату платном картицом.
Плаћање кредитном картицом
ово образац за плаћање кредитном картицом је програмиран за вежбање са ЈаваСцрипт за ДОМ манипулацију. У дизајну се можете сетити елегантног кода Стрипе-а, услуге дигиталног банкарства која је све ближа ПаиПалу.
Кредитна картица
Елегантан благајна за плаћање картицом различит од осталих и заснован на кредитна картица која се налази на врху Тако да у наставку имамо цео образац са различитим подацима које клијент мора да попуни да би извршио уплату у е-трговини.
Корак по корак образац
Un корак по корак образац за регистрацију у ХТМЛ, ЦСС и ЈаваСцрипт. Четири корака за сваку од тачака смештене на левој страни. Добро завршене анимације за високо завршену форму. Препоручује
Интерактивни облик
Un интерактивни облик мулти-пасс направљен са ХТМЛ, ЦСС и ЈаваСцрипт. Истиче се прелазном анимацијом између сваког од корака. Има елегантан додир који неће остати непримећен.
Корак по корак образац
ово корак по корак образац издваја се по томе што је прилично креативан. Одговорићете на питања тако да им се можете вратити у било ком тренутку тако што ћете стално бити визуелно присутни на екрану.
Корак по корак
Корак по корак урађен образац у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у. Карактерише га прелазна анимација између сваког од корака.
Више корака Јкуери образац
Ако имате врло дугачка форма, ово је савршено за различите одељке са врло упечатљивом траком напретка. Заснован на јКуерију и ЦСС-у, издваја се својим дизајном и великом елеганцијом.
УИ образац за анимацију
Прелази овог УИ образац за анимацију они су заснован на Доминку Марскушићу. Пажња на креативни ефекат плавог оквира када кликнемо на неко од два поља за пријаву.
Образац за креирање рачуна / пријаву
Трик пријава и стварање налога која се заснива на анимацији шта се дешава између та два одељка. Веома актуелно и упадљиво присуство у ХТМЛ-у, ЈаваСцрипт-у и ЦСС-у.
Снаке Хигхлигхт
Снаке Хигхлигхт је једна од најупечатљивијих пријава са било које листе која издваја се по елегантној анимацији то се брзо појављује у тренутку када кликнемо на једно од два поља.
Екран за пријаву
Диван овај дизајн екран за пријављивање тако и њихови анимације и колико је креативна. Ако желите да будете најактуелнији што се тиче веб дизајна, овај образац не сме да недостаје. Неопходно.
Логин УИ дизајн
Дизајнирано помоћу ХТМЛ-а, Сасс-а и јКуери-а. Логин УИ дизајн es eлегантно и јасно на тему којој не недостају суптилне анимације да би постао још један од омиљених на листи.
Креирање налога за пријављивање и кориснички интерфејс
Посебна корисничко сучеље за дизајн пријава и креирање налога за боје и за представљање у једна велика карта два одељка. Још једна од најлепших у егзекуцији коју не можемо пропустити. Направљено у ХТМЛ-у, ЦСС-у и ЈаваСцрипт-у.
Непријатне грешке
Непријатне грешке То је сјајна пријава због анимације поља са одвратним.цсс. Оригинално за забаву, безбрижност и веома различиту пријаву. Оригинал без икакве сумње за нашу веб страницу.
Пријави се ЦСС ХТМЛ
Радознала пријава по различитим иконама која показују свако од поља да одведу посетиоца где год желимо. Истичу се и нијансе одабране у бојама. Нема анимацију. Израђен је у ХТМЛ-у и ЦСС-у да би се применио на веб локацији за клијента или нашу.
Модални образац за пријаву
ово Модални образац за пријаву инспирисан је језиком дизајн познат по дизајну материјала. Видели смо то у многим апликацијама на мобилним уређајима. У овом коду имамо таблу за пријаву и таблу за регистрацију која је подразумевано скривена. Регистарска табла се може активирати кликом на плави ступац који се налази на десној страни. Има сјајну анимацију која ће бити врло посебна и упечатљива пријава.
Форм флекбок
Обрасце за претрагу започињемо овим образац заснован на флекбок-у. Истиче се црвеном бојом «претраге» и мало више елегантним пољем за претрагу ваше веб странице.
Анимирани оквир
Са овим анимирани оквир кликните на икону лупе и појавиће се јарко плава анимација тако да претрагу коју ћемо извршити морамо само откуцати на веб локацији. Направљено са ХТМЛ-ом, ЦСС-ом и ЈаваСцрипт-ом.
Поље за претрагу
А велика линија пролази преко екрана тако да када га притиснемо почнемо да куцамо претрагу. Дугме за преузимање да ово дефинишете једноставан образац за претрагу.
Једноставно поље за претрагу кликните на
Једноставно поље за претрагу кликните на заснива се на интеракцији виђеној у апликацију Вазе Дривер Цоммунити возила. Све иконе и слике су направљене помоћу ЦСС-а. Истиче се оним иконама које нам омогућавају да извршимо одређена претраживања производа или услуге. Упадљиво због тога што је цоол.
ЦСС ефекат уноса текста
ЦСС ефекат уноса текста укључује низ од анимације у тексту и фиоци за претрагу бити пажљив трагач за формом.
Претраживање преко целог екрана
Овај унос од претрага преко целог екрана ради са било којом врстом распореда или положаја. Захтева стилове елемент специфичан за контејнер и прекривајући претрагу да се налази у корену. Карактерише га одскочна анимација у тренутку када притиснемо дугме за претрагу.
Претрага
Un формулар за претрагу једноставно то воли да се игра са различитим позицијама и анимације. Кликнемо на дугме за претрагу и појављује се комплетна фиока за откуцавање речи. Врло актуелно и топло се препоручује колико је једноставно.
Без питања
Не доводи у питање es једноставна форма са текстуалним пољем и могућност избора неких одговора да их корисник изабере. Сјајно визуелно бити један од најбољих.
Скочни образац за претплату
Са овим скочни образац за претплату, кликнемо на плутајуће дугме и одвешће нас до форма са врло смешним тоном и поље за унос адресе е-поште. Савршено за маркетинг путем е-поште.
Кориснички интерфејс претплате
А претплатна кутија са звоном за узбуну и мало више од равних боја У дизајну.
ЦСС претплата
А паметна претплатна кутија за чињеницу користите градијенте за дугме претплати се баш као и љубичаста нијанса поља.
Претплата
А једноставна претплата али од великог ефекта по дизајну.
ЕМОЈИ образац за потврду
У чистом ЦСС ово образац за потврду створити кључ или лозинку. Док пишемо, емоји ће мерити ниво заштите обрасца. Смешно и радознало без сумње.
Не пропустите ово списак од 23 анимиране стрелице у ЦСС-у.
Одличан узорак овде представљених примера. Разноликост и прилагођавање различитим контекстима и најбоља ствар је што веза сваког наслова укључује демо и изворни код, мада би то требало да истакнете дугметом «Погледајте демо», јер сам то из радозналости открио у наслову . Хвала на доприносу. Поздрав из Каракаса.
Много ми је помогло, хвала.