Nëse ka diçka që zakonisht është shumë e zakonshme për çdo lloj faqe në internet, këto janë format. Formularët që përdorim për të plotësuar informacionin e kontaktit, futni detajet e bankës, futuni në një rrjet social ose thjesht kryeni një kërkim si ai që ne zakonisht bëjmë çdo ditë në motorin e kërkimit Google.
Kështu që sot do t'ju tregojmë 40 forma në CSS duke filluar nga formularët e kontaktit, blerjet e kartave të kreditit, hyrjet, thjeshtë, pajtim ose edhe vërtetim. Një seri formash elegance dhe stili të shkëlqyeshëm për t'i dhënë asaj pikë të veçantë faqes suaj të internetit, pavarësisht nga tema.
Formulari i kontaktit minimalist
Një formë e thjeshtë kontakti me një larmi e madhe e efekteve siç janë shenjat lundruese ose animacionet e linjës. Kod elegant CSS me pak JavaScript. Nëse jeni duke kërkuar për një forma minimaliste e kontaktit kjo është perfekte për ju.
Forma minimaliste
Tjetër forma minimale, edhe pse vetëm në CSS të jetë a formë e thjeshtë dhe me efekt të lartë. Nuk ka animacionet minimaliste të asaj të mëparshme, por e përmbush shumë mirë objektivin e saj.
Forma e kontaktit të cilësisë së mirë
Forma e kontaktit të cilësisë së mirë, një dizajn shumë elegant. Të përgjegjshëm për ato faqe në internet të shihet nga celulari, megjithëse nuk përfshin vërtetimin.
Formulari i kontaktit të letrës
kjo kontaktoni formë ka një animacion mjaft kurioz: formohet një letër. E thjeshtë, por shumë e dobishme me shumë ngjyra.
Forma e kontaktit e zgjeruar
kjo forma e zgjeruar e kontaktit Onlyshtë vetëm pjesa e përparme dhe ka validimi me jQuery. Ne klikojmë në butonin lundrues dhe formulari do të shfaqet me një animacion të gjallë. I shquar.
Forma e kontaktit UI
Forma e kontaktit UI është një formë e bërë në HTML dhe CSS. Ajo shquhet për të qenë një kartë e thjeshtë kontakti që mund ta plotësojmë në mënyrë që vetëm fusha e tekstit të ndryshojë kur të klikohet.
Arka e kartës së pagesës
Un arka e kartës së pagesës të bëra në HTML, CSS dhe JavaScript të cilat dallohet nga animacioni rrotullues kartën e kreditit kur shtypim fushën CVC ose numrin e sigurisë.
Dizajn i sheshtë i kartës së kreditit
CSS e pastër për një arka për karta krediti në ngjyra të sheshta. Shumëngjyrëshe dhe shumë e thjeshtë që është e aftë të tregojë cilësi dhe profesionalizëm.
Ndërfaqja e kartës së kreditit
Një tjetër kartë krediti në HTML, CSS dhe JavaScript që shquhet për sa i mirë është zgjodhi modelin e përgjithshëm. Ne kemi harruar për animacionet në këtë pjesë të kodit për faqen tuaj të internetit. Shkarkojeni në këtë link.
Reagoni në arkë
Reagoni në arkë, e bërë me React.js, dallohet nga fotografinë anësore që mund ta rregullojmë me shërbimet ose produktet që shesim në tregtinë tonë elektronike.
Kartë pagese arkë
Kjo arkë shquhet për mundësinë e vendosjes së një imazhi në kartë. A formë e thjeshtë dhe e qartë e bërë me CSS3, HTML5 dhe pak nga jQuery. Cilësi e lartë dhe e ndryshme nga pjesa tjetër e arka në këtë listë. Ju mund të shkarkoni këtu kjo arkë e kartës së pagesës.
Pagesa e kartës së kreditit
kjo formularin e pagesës së kartës së kreditit është programuar të praktikohet me të JavaScript për manipulim me DOM. Ju mund të kujtoni në dizajn kodin elegant të Stripe, shërbimi dixhital bankar që po i afrohet PayPal.
Kartë Krediti
Një elegante arkë për pagesa me kartë të ndryshme nga të tjerët dhe bazuar në një kartë krediti e vendosur në krye Kështu që më poshtë kemi të gjithë formularin me të dhëna të ndryshme që klienti duhet të plotësojë për të bërë pagesën në tregtinë elektronike.
Forma hap pas hapi
Un formë hap pas hapi për regjistrim të bërë në HTML, CSS dhe JavaScript. Katër hapa për secilën nga pikat e vendosur në anën e majtë. Animacione të mbaruara mirë për një formë mjaft të përfunduar. Shumë e rekomanduar
Forma ndërvepruese
Un formë interaktive multi-hap i bërë me HTML, CSS dhe JavaScript. Ajo shquhet për animacionin në tranzicion midis secilit prej hapave. Ka një prekje elegante që nuk do të mbetet pa u vërejtur.
Forma hap pas hapi
kjo formë hap pas hapi shquhet për të qenë mjaft krijues. Ju do t'i përgjigjeni pyetjeve në mënyrë që të mund të ktheheni tek ata në çdo kohë duke qenë vizualisht i pranishëm në ekran gjatë gjithë kohës.
Hap pas hapi
Forma hap pas hapi e bërë në HTML, CSS dhe JavaScript. Karakterizohet nga animacioni i tranzicionit midis secilit prej hapave.
Formulari Jquery me shumë hapa
Nëse keni një formë shumë e gjatë, kjo është perfekte për seksione të ndryshme me një shirit progresiv mjaft të habitshëm. Bazuar në jQuery dhe CSS, ajo shquhet për dizajnin e saj dhe për elegancën e saj të madhe.
Forma e animacionit UI
Kalimet e kësaj Forma e animacionit UI ata janë bazuar në Domink Marskusic. Vëmendje për efektin krijues të kutisë në blu kur klikojmë në disa nga dy fushat e hyrjes ose hyrjes.
Forma e krijimit / hyrjes së llogarisë
Një hile hyrja dhe krijimi i llogarisë e cila bazohet në animacion çfarë ndodh midis atyre dy seksioneve. Prania shumë aktuale dhe e habitshme që duhet të bëhet në HTML, JavaScript dhe CSS.
Ngjarja e gjarprit
Ngjarja e gjarprit është një nga hyrjet më të habitshme të çdo liste që shquhet për animacionin elegant që del shpejt në momentin që klikojmë në njërën nga dy fushat.
Ekrani i hyrjes
Hyjnore këtë model ekranin e hyrjes ashtu janë edhe të tyre animacione dhe sa krijuese është. Nëse dëshironi të jeni më aktualët kur bëhet fjalë për krijimin e faqeve në internet, kjo formë nuk mund të mungojë. E domosdoshme.
Hartimi i ndërfaqes së përdoruesit
Projektuar duke përdorur HTML, Sass dhe jQuery. Hartimi i ndërfaqes së përdoruesit es ei ligjshëm dhe i qartë mbi temën që nuk ka mungesë të animacioneve delikate për t'u bërë një tjetër nga të preferuarat në listë.
Identifikimi dhe krijimi i llogarisë UI
Një e veçantë dizajni i hyrjes dhe krijimi i llogarisë UI për ngjyrat dhe për paraqitjen në një letër e madhe dy seksionet. Një tjetër nga më të bukurit në ekzekutim që nuk mund të na mungojë. Krijuar në HTML, CSS dhe JavaScript.
Gabime të neveritshme
Gabime të neveritshme Isshtë një hyrje e shkëlqyeshme për shkak të animacionit të fusha me neveritshëm.css. Origjinale për të qenë një hyrje argëtuese, e lumtur dhe shumë e ndryshme. Origjinale pa asnjë dyshim për faqen tonë të internetit.
Identifikohu HTML CSS
Një hyrje kurioze nga ikonat e ndryshme që tregojnë secilën prej fushave për ta çuar vizitorin ku të duam. Spikasin edhe nuancat e zgjedhura në ngjyra. Nuk ka ndonjë animacion. Isshtë bërë në HTML dhe CSS për ta zbatuar atë në faqen e internetit për një klient ose tonën.
Forma e hyrjes modale
kjo Forma e hyrjes modale është frymëzuar nga gjuha e dizajn i njohur për Material Design. Ne e kemi parë atë në shumë aplikacione në pajisjet mobile. Në këtë kod kemi një panel hyrjeje dhe një panel regjistrimi që është i fshehur si parazgjedhje. Paneli i regjistrimit mund të aktivizohet duke klikuar në kolonën blu të vendosur në anën e djathtë. Ka një animacion të shkëlqyeshëm për të qenë një hyrje shumë e veçantë dhe e habitshme.
Formoni flexbox
Ne i fillojmë format e kërkimit me këtë formë bazuar ne flexbox. Ajo dallohet për ngjyrën e kuqe të «kërkimit» dhe për pak më shumë për një fushë elegante kërkimi për faqen tuaj te internetit.
Kutia e animuar
Me këtë kuti e animuar klikoni në ikonën e lupës dhe do të shfaqet një animacion i ndritshëm blu kështu që ne duhet të shtypim vetëm kërkimin që do të kryejmë në faqen e internetit. Krijuar me HTML, CSS dhe JavaScript.
Fusha e kërkimit
një vija e madhe kalon nëpër ekran në mënyrë që kur ta shtypim të fillojmë të shtypim kërkimin. Një buton marrjeje për ta përcaktuar këtë formular i thjeshtë kërkimi.
Fusha e thjeshtë e kërkimit klikoni në
Fusha e thjeshtë e kërkimit klikoni në bazohet në një ndërveprim të parë në Aplikacioni i Komunitetit të Shoferit Waze automjeteve. Të gjitha ikonat dhe imazhet janë bërë me CSS. Ajo dallohet për ato ikona që na lejojnë të kryejmë kërkime specifike për një produkt ose shërbim. Goditur për shkak të asaj se sa i freskët është.
Efekti i futjes së tekstit CSS
Efekti i futjes së tekstit CSS përfshin një seri të animacione në sirtar të tekstit dhe kërkimit të jetë një kërkues i kujdesshëm në formë.
Kërkim në ekran të plotë
Kjo hyrje nga kërkim në ekran të plotë punon me çdo lloj paraqitje ose pozicion. Kërkon stile elementi specifik i kontejnerit dhe kërkimi i mbivendosur të jetë e vendosur në rrënjë. Karakterizohet nga një animacion kërcues në momentin që shtypim butonin e kërkimit.
Kërko
Un forma e kërkimit e thjeshtë që atij i pëlqen të luajë me pozicione të ndryshme dhe animacione. Klikojmë në butonin e kërkimit dhe sirtari i plotë shfaqet për të shtypur fjalët. Shumë aktuale dhe shumë e rekomanduar për sa e thjeshtë është.
Nuk ka pyetje
Pa diskutim es formë e thjeshtë me fushë teksti dhe opsionin për të zgjedhur disa përgjigje që përdoruesi t'i zgjedhë ato. Një marrëveshje e shkëlqyeshme vizualisht për të qenë një nga më të mirat.
Forma e abonimit në popup
Me këtë forma e abonimit në popup, ne klikojmë në butonin lundrues dhe do të na çojë formë me një ton shumë qesharak dhe një fushë ku të futni emailin. E përsosur për marketing me email.
Kutia e pajtimit UI
një kutia e pajtimit me një zile alarmi dhe pak më shumë se ngjyrat e sheshta Në dizajn.
Kutia e pajtimit në CSS
një kuti e zgjuar e pajtimit për faktin e përdorni gradientët për butonin e abonimit ashtu si ngjyra e purpurt e fushës.
Kutia e pajtimit
një kuti e thjeshtë e pajtimit por me efekt të madh nga dizajni.
Formulari i vërtetimit të EMOJI
Në të pastër CSS kjo formularin e vërtetimit për të krijuar çelësin ose fjalëkalimin. Ndërsa shkruajmë, emoji do të masë nivelin e sigurisë së formularit. Qesharak dhe kurioz pa dyshim.
Mos e humbni këtë lista e 23 shigjetave të animuara në CSS.
Shembull i shkëlqyeshëm i shembujve të paraqitur këtu. Shumëllojshmëria dhe adaptimi në kontekste të ndryshme dhe gjëja më e mirë është që lidhja e secilit titull të përmbajë demo dhe kodin burimor, megjithëse duhet ta theksoni me një buton «Shihni demo» sepse ishte për kuriozitet që unë e zbulova atë në titulli Faleminderit për kontributin Përshëndetje nga Caracas.
Më ndihmoi shumë, faleminderit.