Če obstaja nekaj, kar je običajno zelo pogosto za katero koli vrsto spletnega mesta, so to obrazci. Obrazci, ki jih uporabljamo za izpolnjevanje kontaktnih podatkov, vnesite bančne podatke, se prijavite v družabno omrežje ali preprosto izvedite iskanje, kakršno običajno opravljamo vsak dan v iskalniku Google.
Torej danes vam bomo pokazali 40 obrazcev v CSS od obrazcev za stike, plačil s kreditnimi karticami, prijav, preprostih, naročnin ali celo preverjanj. Serija oblik izjemne elegance in sloga, ki dajejo vašemu spletnemu mestu to posebno pozornost, ne glede na temo.
Minimalistični kontaktni obrazec
Preprost kontaktni obrazec z veliko različnih učinkov na primer plavajoče znamke ali animacije vrstic. Elegantna koda CSS z malo JavaScripta. Če iščete minimalistični kontaktni obrazec to je kot nalašč za vas.
Minimalistična oblika
Drugo minimalna oblika, čeprav samo v CSS, da je preprosta in visoko učinkovita oblika. Nima minimalističnih animacij prejšnje, vendar zelo dobro izpolnjuje svoj cilj.
Vintage kontaktni obrazec
Vintage kontaktni obrazec, zelo eleganten dizajn. Odziven za ta spletna mesta da se vidi z mobilnega telefona, čeprav ne vključuje preverjanja veljavnosti.
Obrazec za stik z dopisom
ta kontaktni formular Ima precej radovedno animacijo: oblikuje se pismo. Preprosto, a zelo uporabno z veliko barv.
Razširjeni kontaktni obrazec
ta kontaktni obrazec razširjen Je le sprednji del in ima preverjanje z jQuery. Kliknite na plavajoči gumb in obrazec se bo prikazal z živahno animacijo. Izjemno.
Uporabniški vmesnik za kontaktni obrazec
Uporabniški vmesnik za kontaktni obrazec gre za obrazec v HTML in CSS. Izstopa po tem, da je preprosto kontaktno kartico da lahko zapolnimo tako, da se ob kliku spremeni le besedilno polje.
Plačilo s plačilno kartico
Un plačilo s plačilno kartico narejen v HTML, CSS in JavaScript, ki odlikuje vrtljiva animacija kreditno kartico, ko pritisnemo na polje CVC ali varnostno številko.
Ravna zasnova kreditne kartice
Čisti CSS za a plačilo za kreditne kartice v enobarvnih barvah. Barvita in zelo preprosta, ki lahko označuje kakovost in profesionalnost.
Uporabniški vmesnik kreditne kartice
Še ena kreditna kartica v HTML, CSS in JavaScript, ki izstopa, kako dobra je izbral celoten dizajn. V tem delu kode za vaše spletno mesto smo pozabili na animacije. Prenesite ga s te povezave.
Odziv na blagajno
Odziv na blagajno, narejen z React.js, odlikuje stransko sliko, ki jo lahko prilagodimo s storitvami ali izdelki, ki jih prodajamo v našem e-poslovanju.
Plačilna kartica za plačilo
Ta blagajna izstopa z možnostjo dajanja slike na kartico. A preprost in jasen obrazec, narejen s CSS3, HTML5 in malo jQueryja. Kakovosten in drugačen od ostalih blagajn na tem seznamu. Lahko prenesete tukaj to plačilno kartico.
Plačilo s kreditno kartico
ta obrazec za plačilo s kreditno kartico je programiran za vadbo z JavaScript za manipulacijo z DOM. Pri oblikovanju se lahko spomnite elegantne kode Stripe, storitve digitalnega bančništva, ki se bliža PayPalu.
Kreditna kartica
Elegantno blagajna za plačilo s kartico drugačna od drugih in temelji na kreditno kartico na vrhu Tako da imamo spodaj celoten obrazec z različnimi podatki, ki jih mora stranka izpolniti za plačilo v e-trgovini.
Korak za korakom
Un korak za korakom za registracijo v HTML, CSS in JavaScript. Štirje koraki za vsako od točk ki se nahaja na levi strani. Dobro dokončane animacije za zelo dodelano obliko. Zelo priporočljivo.
Interaktivna oblika
Un interaktivna oblika več korakov, narejenih z HTML, CSS in JavaScript. Izstopa po prehodni animaciji med posameznimi koraki. Ima eleganten pridih, ki ne bo ostal neopažen.
Korak za korakom
ta korak za korakom izstopa, da je precej kreativen. Odgovorili boste na vprašanja tako da se lahko kadar koli vrnete nanje, tako da ste ves čas vizualno prisotni na zaslonu.
Korak za korakom
Korak za korakom opravljen obrazec v HTML, CSS in JavaScript. Zanj je značilna animacija prehoda med posameznimi koraki.
Večstopenjski obrazec Jquery
Če imate zelo dolga oblika, To je kot nalašč za različne odseke z zelo presenetljivo vrstico napredka. Na osnovi jQuery in CSS izstopa s svojo zasnovo in izjemno eleganco.
Obrazec za animacijo uporabniškega vmesnika
Prehodi tega Obrazec za animacijo uporabniškega vmesnika so na podlagi Dominka Marškušiča. Pozornost na ustvarjalni učinek modrega polja, ko kliknemo na dve od dveh prijavnih polj.
Obrazec za ustvarjanje računa / prijavo
Trik prijava in ustvarjanje računa ki temelji na animaciji kaj se dogaja med tema dvema poglavjema. Zelo aktualna in presenetljiva prisotnost v HTML, JavaScript in CSS.
Poudarek kače
Poudarek kače je eno najbolj presenetljivih prijav na katerem koli seznamu izstopa po elegantni animaciji ki se hitro prikaže v trenutku, ko kliknemo eno od obeh polj.
Zaslon za prijavo
Božanska zasnova zaslon za prijavo takšni so tudi njihovi animacije in kako ustvarjalna je. Če želite biti najbolj aktualni pri spletnem oblikovanju, ta obrazec ne sme manjkati. Nepogrešljiv.
Prijava uporabniškega vmesnika
Zasnovan z uporabo HTML, Sass in jQuery. Prijava uporabniškega vmesnika es elegantno in jasno o temi, ki ji ne manjkajo subtilne animacije, da bi postala še ena izmed priljubljenih na seznamu.
Ustvarjanje prijave in uporabniškega vmesnika
Posebna uporabniški vmesnik za načrtovanje prijave in ustvarjanje računa za barve in za predstavitev v ena velika karta dva odseka. Še ena najlepših v izvedbi, ki je ne moremo zgrešiti. Izdelano v HTML, CSS in JavaScript.
Neprijetne napake
Neprijetne napake To je odlična prijava zaradi animacije polja z obnoxious.css. Izvirnik za zabavno, brezskrbno in zelo drugačno prijavo. Izvirnik brez dvoma za našo spletno stran.
Prijava CSS HTML
Nenavadna prijava z različnimi ikonami ki prikazujejo vsa polja, da obiskovalca popeljejo kamor koli želimo. Izstopajo tudi odtenki, izbrani v barvah. Nima nobene animacije. Narejen je v HTML in CSS, da ga implementiramo na spletnem mestu za stranko ali za nas.
Modalni prijavni obrazec
ta Modalni prijavni obrazec se zgleduje po jeziku oblikovanje, znano po materialnem oblikovanju. Videli smo ga v številnih aplikacijah na mobilnih napravah. V tej kodi imamo prijavno ploščo in registracijsko ploščo, ki je privzeto skrita. Registracijsko ploščo lahko aktivirate s klikom na modri stolpec na desni strani. Ima odlično animacijo, ki je prav posebna in presenetljiva prijava.
Oblikujte flexbox
Obrazce za iskanje začnemo s tem obrazec temelji na flexboxu. Izstopa po rdeči barvi «iskanja» in še malo po elegantnem iskalnem polju za vaše spletno mesto.
Animirani okvir
S tem animirana škatla kliknite ikono povečevalnega stekla in prikaže se živo modra animacija tako da moramo samo iskanje, ki ga bomo izvedli, vtipkati na spletni strani. Izdelano z HTML, CSS in JavaScript.
Iskalno polje
A velika črta teče čez zaslon tako da ko pritisnemo, začnemo tipkati iskanje. Gumb za prevzem, da to določite preprost obrazec za iskanje.
Preprosto iskalno polje kliknite
Preprosto iskalno polje kliknite temelji na interakciji, ki jo vidimo v aplikacijo Waze Driver Community voznih. Vse ikone in slike so narejene s CSS. Izstopa po tistih ikonah, ki nam omogočajo določeno iskanje izdelka ali storitve. Presenetljivo, kako kul je.
Učinek vnosa besedila CSS
Učinek vnosa besedila CSS vključuje vrsto animacije v besedilu in iskalnem predalu biti previden iskalec v obliki.
Celozaslonsko iskanje
Ta vnos iz celozaslonsko iskanje deluje s katero koli vrsto postavitve ali položaja. Zahteva sloge element, specifičen za vsebnik, in element za prekrivanje iskanja da se nahaja v korenu. Zanj je značilna odskočna animacija v trenutku, ko pritisnemo gumb za iskanje.
Iskanje
Un iskalni obrazec preprosto to rad se igra z različnimi položaji in animacije. Kliknite gumb za iskanje in celotni predal se prikaže, da vnesete besede. Zelo aktualno in zelo priporočljivo, kako enostavno je.
Brez vprašanj
Nobenega vprašanja es preprost obrazec z besedilnim poljem in možnost izbire nekaterih odgovorov, da jih uporabnik izbere. Odlično vizualno, da bi bil eden najboljših.
Popup obrazec za naročnino
S tem popup obrazec za naročnino, kliknemo na plavajoči gumb in pripeljal nas bo do obliki z zelo smešnim tonom in polje za vnos e-poštnega sporočila. Kot nalašč za e-poštno trženje.
Uporabniški vmesnik za naročnino
A naročnina z alarmnim zvoncem in malo več kot ravne barve V zasnovi.
Naročniško polje CSS
A pametna naročnina za dejstvo uporabite gradiente za gumb za naročanje, tako kot vijolični odtenek polja.
Naročniško polje
A preprosto naročniško polje vendar z velikim dizajnom.
Obrazec za potrjevanje EMOJI
V čistem CSS to obrazec za potrditev da ustvarite ključ ali geslo. Ko pišemo, bodo emoji izmerili raven varnosti obrazca. Brez dvoma smešno in radovedno.
Ne zamudite tega seznam 23 animiranih puščic v CSS.
Odličen vzorec tukaj predstavljenih primerov. Raznolikost in prilagajanje različnim kontekstom in najboljše je, da povezava vsakega naslova vključuje predstavitev in izvorno kodo, čeprav bi jo morali poudariti z gumbom »Glej predstavitev«, ker sem jo iz radovednosti odkril v naslov. Hvala za prispevek. Lep pozdrav iz Caracasa.
Zelo mi je pomagalo, hvala.