Ja kaut kas parasti ir ļoti izplatīts jebkura veida vietnei, tās ir veidlapas. Veidlapas, kuras mēs izmantojam kontaktinformācijas aizpildīšanai, ievadiet bankas rekvizītus, piesakieties sociālajā tīklā vai vienkārši veiciet meklēšanu, tādu, kādu mēs parasti ikdienā veicam Google meklētājprogrammā.
Tāpēc šodien mēs jums parādīsim 40 veidlapas CSS sākot no kontaktu veidlapām, kredītkaršu izrakstīšanās, pieteikšanās, vienkāršas, abonēšanas vai pat apstiprināšanas. Lieliskas elegances un stila formu virkne, lai piešķirtu šo īpašo punktu jūsu vietnei neatkarīgi no tēmas.
Minimālisma kontaktu veidlapa
Vienkārša saziņas veidlapa ar a daudz dažādu efektu piemēram, peldošās zīmes vai līniju animācijas. Elegants CSS kods ar mazliet JavaScript. Ja jūs meklējat minimālisma kontaktu forma tas ir ideāli piemērots jums.
Minimālistiska forma
Cits minimāla forma, lai gan tikai CSS jābūt a vienkārša un efektīva forma. Tam nav minimālisma animācijas no iepriekšējā, bet tas ļoti labi izpilda savu mērķi.
Vintage kontaktu veidlapa
Vintage kontaktu veidlapa, ļoti elegants dizains. Reaģē uz šīm vietnēm lai to redzētu no mobilā tālruņa, lai gan tas neietver validāciju.
Vēstules saziņas forma
šis kontaktu formu tai ir diezgan ziņkārīga animācija: veidojas vēstule. Vienkārši, bet ļoti noderīgi ar daudz krāsu.
Paplašināta saziņas forma
šis kontaktu forma ir paplašināta Tas ir tikai priekšgals un tam ir validācija ar jQuery. Mēs noklikšķinām uz peldošās pogas, un forma parādīsies ar dinamisku animāciju. Izcils.
Saziņas veidlapa UI
Saziņas veidlapa UI tā ir HTML un CSS veidota forma. Tas izceļas ar to, ka ir vienkārša kontakta karte ko mēs varam aizpildīt, lai, noklikšķinot uz tā, mainītos tikai teksta lauks.
Norēķināšanās ar maksājumu karti
Un norēķinu karte izgatavots HTML, CSS un JavaScript, kas izceļas ar rotējošu animāciju kredītkarte šobrīd nospiežam CVC vai drošības numura lauku.
Kredītkartes plakans dizains
Tīra CSS a kase par kredītkartes plakanās krāsās. Krāsains un ļoti vienkāršs, kas spēj apzīmēt kvalitāti un profesionalitāti.
Kredītkartes lietotāja interfeiss
Vēl viena kredītkarte HTML, CSS un JavaScript formātā, kas izceļas ar to, cik laba tā ir izvēlējās dizainu vispārējā līmenī. Mēs aizmirsām par animācijām šajā jūsu vietnes koda fragmentā. Lejupielādējiet to šajā saitē.
Reaģēt uz izrakstīšanos
Reaģēt uz izrakstīšanos, kas izgatavots ar React.js, atšķiras ar sānu attēlu, kuru mēs varam pielāgot ar pakalpojumiem vai produktiem, kurus mēs pārdodam savā e-komercijā.
Checkout norēķinu karte
Šī izrakstīšanās izceļas ar iespēju ievietot attēlu kartē. A vienkārša un skaidra forma, kas izveidota ar CSS3, HTML5 un mazliet jQuery. Augstas kvalitātes un atšķiras no pārējām šajā sarakstā esošajām kasēm. Jūs varat lejupielādēt šeit šī norēķinu kartes izrakstīšanās.
Maksājums ar kredītkarti
šis kredītkartes maksājuma forma ir ieprogrammēts praktizēt ar JavaScript DOM manipulācijām. Dizainā varat atsaukt atmiņā Stripe - digitālās bankas pakalpojuma, kas tuvojas PayPal, kodu.
Kredītkarte
Elegants norēķināšanās ar karti atšķiras no pārējiem un balstās uz kredītkarte, kas atrodas augšpusē Tālāk mums ir visa veidlapa ar dažādiem datiem, kas klientam jāaizpilda, lai veiktu maksājumu e-komercijā.
Soli pa solim veidlapa
Un soli pa solim veidlapa reģistrācijai HTML, CSS un JavaScript. Četri soļi katram no punktiem atrodas kreisajā pusē. Labi pabeigtas animācijas ļoti pabeigtai formai. Augsti ieteicams.
Interaktīva forma
Un interaktīva forma multi-pass, kas veikts ar HTML, CSS un JavaScript. Tas izceļas ar pārejas animāciju starp katru darbību. Tam ir elegants pieskāriens, kas nepaliks nepamanīts.
Soli pa solim veidlapa
šis soli pa solim veidlapa izceļas ar to, ka ir diezgan radošs. Jūs atbildēsiet uz jautājumiem lai jūs jebkurā laikā varētu atgriezties pie viņiem, visu laiku vizuāli atrodoties ekrānā.
Soli pa solim
Soli pa solim veidlapa pabeigta HTML, CSS un JavaScript. To raksturo pārejas animācija starp katru no darbībām.
Daudzpakāpju Jquery forma
Ja jums ir a ļoti gara forma, tas ir lieliski piemērots dažādām sadaļām ar ļoti pārsteidzošu progresa joslu. Balstoties uz jQuery un CSS, tas izceļas ar savu dizainu un lielisko eleganci.
UI animācijas forma
Pārejas no tā UI animācijas forma tie ir pamatojoties uz Dominku Marskusiču. Uzmanību zilā lodziņa radošajam efektam, kad mēs noklikšķinām uz dažiem no diviem pieteikšanās vai sesijas laukiem.
Konta izveides / pieteikšanās forma
Triks pieteikšanās un konta izveide kuras pamatā ir animācija kas notiek starp šīm divām sadaļām. Ļoti aktuāla un pārsteidzoša klātbūtne jāveic HTML, JavaScript un CSS.
Čūskas izcelšana
Čūskas izcelšana ir viena no visspilgtākajām pieteikšanās iespējām jebkurā sarakstā izceļas ar elegantu animāciju tas parādās ātri brīdī, kad noklikšķinām uz viena no diviem laukiem.
Pieteikšanās ekrāns
Dievišķais šis dizains pieteikšanās ekrāns tāpat ir viņu animācijas un cik tas ir radošs. Ja vēlaties, lai web dizains būtu visjaunākais, šī forma nevar būt garām. Neaizstājams.
Pieteikšanās lietotāja saskarnes dizains
Izstrādāts, izmantojot HTML, Sass un jQuery. Pieteikšanās lietotāja saskarnes dizains es elikumīgs un skaidrs par tēmu, kurai netrūkst smalku animāciju, lai kļūtu par vēl vienu no izlases favorītiem.
Pieteikšanās un lietotāja saskarnes izveide
Speciāls pieteikšanās noformēšana un konta izveide krāsām un pasniegšanai viena liela karte abas sadaļas. Vēl viens no skaistākajiem izpildījumā, ko mēs nevaram palaist garām. Izgatavots HTML, CSS un JavaScript.
Nepatīkamas kļūdas
Nepatīkamas kļūdas Tā ir lieliska pieteikšanās, jo ir animēta lauki ar nepatīkamu.css. Oriģināls ir jautra, bezrūpīga un ļoti atšķirīga pieteikšanās. Oriģināls bez šaubām par mūsu vietni.
Pieteikšanās CSS HTML
Ziņkārīga pieteikšanās ar dažādām ikonām kas parāda, ka katrs no laukiem aizved apmeklētāju visur, kur mēs vēlamies. Izceļas arī krāsās izvēlētie toņi. Tam nav animācijas. Tas ir izveidots HTML un CSS, lai to ieviestu klienta vai mūsu pašu vietnē.
Modālā pieteikšanās forma
šis Modālā pieteikšanās forma ir iedvesmojusies no dizains, kas pazīstams ar materiālu dizainu. Mēs to esam redzējuši daudzās lietojumprogrammās mobilajās ierīcēs. Šajā kodā mums ir pieteikšanās panelis un reģistrācijas panelis, kas pēc noklusējuma ir paslēpts. Reģistrācijas paneli var aktivizēt, noklikšķinot uz zilās kolonnas labajā pusē. Tam ir lieliska animācija, kas ir ļoti īpaša un pārsteidzoša pieteikšanās.
Veidlapa flexbox
Mēs sākam meklēšanas veidlapas ar šo forma pamatojoties uz flexbox. Tas izceļas ar sarkano krāsu «meklēšana» un nedaudz vairāk par elegantu meklēšanas lauku jūsu vietnei.
Animācijas kaste
Ar to animācijas kaste noklikšķiniet uz palielināmā stikla ikonas un parādīsies spilgti zila animācija lai mums būtu tikai jāievada meklēšana, kuru mēs veiksim vietnē. Izgatavots ar HTML, CSS un JavaScript.
Meklēšanas lauks
A liela līnija iet pāri ekrānam lai, nospiežot to, mēs sāktu rakstīt meklēšanu. Poga, lai to definētu vienkārša meklēšanas forma.
Vienkāršs meklēšanas lauks noklikšķiniet uz
Vienkāršs meklēšanas lauks noklikšķiniet uz ir balstīta uz mijiedarbību, kas novērota Waze draiveru kopienas lietotne transporta līdzeklis. Visas ikonas un attēli tiek veidoti, izmantojot CSS. Tas izceļas ar tām ikonām, kas ļauj mums veikt īpašus produkta vai pakalpojuma meklējumus. Uzkrītoši, cik forši tas ir.
CSS teksta ievades efekts
CSS teksta ievades efekts ietver virkni animācijas teksta un meklēšanas atvilktnē būt formā uzmanīgam meklētājam.
Meklēšana visā ekrānā
Šis ieraksts no meklēšana visā ekrānā tas darbojas ar jebkura veida izkārtojumu vai pozīciju. Nepieciešami stili konteineram raksturīgs un meklēšanas pārklājuma elements atrasties saknē. To raksturo atlēciena animācija brīdī, kad mēs nospiežam meklēšanas pogu.
Meklēt
Un meklēšanas forma tas ir vienkārši viņam patīk spēlēt ar dažādām pozīcijām un animācijas. Mēs noklikšķinām uz meklēšanas pogas un parādās pilnīga atvilktne, lai ierakstītu vārdus. Ļoti aktuāls un ļoti ieteicams, cik vienkārši tas ir.
Nav jautājumu
Nav jautājumu es vienkārša forma ar teksta lauku un iespēja izvēlēties dažas atbildes, lai lietotājs tās varētu atlasīt. Vizuāli liels darījums, lai būtu viens no labākajiem.
Uznirstošā abonēšanas veidlapa
Ar šo uznirstošā abonēšanas veidlapa, mēs noklikšķinām uz peldošās pogas, un tas mūs aizvedīs forma ar ļoti smieklīgu toni un lauks, kur ievadīt e-pastu. Lieliski piemērots e-pasta mārketingam.
Abonēšanas lodziņa lietotāja interfeiss
A abonēšanas lodziņš ar trauksmes zvanu un nedaudz vairāk par plakanām krāsām Projektā.
CSS abonēšanas lodziņš
A viedā abonēšanas kaste par faktu izmantojiet gradientus abonēšanas pogai tāpat kā lauka purpursarkanais nokrāsa.
Abonēšanas lodziņš
A vienkārša abonēšanas kaste bet pēc konstrukcijas ir ļoti efektīva.
EMOJI validācijas veidlapa
Tīrā veidā CSS šo apstiprināšanas veidlapa lai izveidotu atslēgu vai paroli. Kā mēs rakstām, emocijzīmes izmērīs formas drošības līmeni. Smieklīgi un ziņkārīgi, bez šaubām.
Nepalaidiet to garām saraksts ar 23 animētajām bultiņām CSS.
Lielisks šeit sniegto piemēru paraugs. Dažādība un pielāgošanās dažādiem kontekstiem, un labākais ir tas, ka katra nosaukuma saitē ir iekļauts demonstrācijas materiāls un pirmkods, lai gan tas ir jāizceļ ar pogu «Skatīt demonstrāciju», jo ziņkārībā es to atklāju ziņkārības dēļ. . Paldies par ieguldījumu. Sveiciens no Karakasas.
Tas man ļoti palīdzēja, paldies.