Jei yra kažkas, kas paprastai yra labai įprasta bet kokio tipo svetainei, tai yra šios formos. Formos, kurias naudojame kontaktinei informacijai užpildyti, įveskite banko duomenis, prisijunkite prie socialinio tinklo arba tiesiog atlikite paiešką, tokią, kokią paprastai darome kasdien „Google“ paieškos sistemoje.
Taigi šiandien mes jums parodysime 40 formų CSS pradedant kontaktinėmis formomis, atsiskaitymais kreditinėmis kortelėmis, prisijungimais, paprastais, prenumeratos ar net patvirtinimu. Puikios elegancijos ir stiliaus formų serija, suteikianti tą ypatingą tašką jūsų svetainei, neatsižvelgiant į temą.
Minimalistinė kontaktinė forma
Paprasta susisiekimo forma su a labai įvairūs efektai pavyzdžiui, plūduriuojantys ženklai ar linijų animacijos. Elegantiškas CSS kodas su šiek tiek „JavaScript“. Jei ieškote a minimalistinė kontaktinė forma tai puikiai tinka jums.
Minimalistinė forma
Kitas minimali forma, nors tik CSS būti a paprasta ir didelio efekto forma. Jame nėra minimalistinių animacijų, panašių į ankstesnį, tačiau jis labai gerai įgyvendina savo tikslą.
Derliaus kontaktinė forma
Derliaus kontaktinė forma, labai elegantiškas dizainas. Reaguoja į tas svetaines kad būtų galima pamatyti iš mobiliojo ryšio, nors jis neapima patvirtinimo.
Laiško kontaktinė forma
tai kontaktinę formą ji turi gana įdomią animaciją: suformuojamas laiškas. Paprasta, bet labai naudinga su daugybe spalvų.
Išplėstinė kontakto forma
tai kontakto forma išplėsta Tai tik priekinė dalis ir turi patvirtinimas naudojant „jQuery“. Spustelėkite plūduriuojantį mygtuką ir forma pasirodys su gyva animacija. Išskirtinis.
Susisiekimo formos vartotojo sąsaja
Susisiekimo formos vartotojo sąsaja tai forma, sukurta HTML ir CSS. Jis išsiskiria tuo, kad yra paprasta kontaktinė kortelė kad mes galime užpildyti, kad spustelėjus pasikeistų tik teksto laukas.
Mokėjimo kortelė
Un atsiskaitymas mokėjimo kortele Pagaminta HTML, CSS ir „JavaScript“ išsiskiria besisukančia animacija kredito kortelę, kai paspaudžiame CVC arba apsaugos numerio lauką.
Kreditinės kortelės plokščias dizainas
Grynas CSS a kasos plokščių spalvų kreditinės kortelės. Spalvinga ir labai paprasta, galinti žymėti kokybę ir profesionalumą.
Kreditinės kortelės vartotojo sąsaja
Kita kredito, HTML, CSS ir „JavaScript“ kortelė, išsiskirianti tuo, kad ji yra gera pasirinko bendrą dizainą. Pamiršome animacijas šiame jūsų svetainės kodo fragmente. Atsisiųskite šią nuorodą.
Reaguoti į kasą
Reaguoti į kasą, pagamintas naudojant „React.js“, išsiskiria šoninį paveikslėlį, kurį galime pritaikyti su paslaugomis ar produktais, kuriuos parduodame savo el. prekyboje.
„Checkout“ mokėjimo kortelė
Ši kasa išsiskiria galimybe įdėti atvaizdą į kortelę. A paprasta ir aiški forma, sukurta naudojant CSS3, HTML5 ir šiek tiek „jQuery“. Aukštos kokybės ir skiriasi nuo likusių kasų šiame sąraše. Galite atsisiųsti čia šią mokėjimo kortelę.
Mokėjimas kreditine kortele
tai atsiskaitymo kreditine kortele forma yra užprogramuota praktikuotis su „DOM“ manipuliavimo „JavaScript“. Dizaine galite prisiminti elegantišką skaitmeninės bankininkystės paslaugos „Stripe“ kodą, kuris artėja prie „PayPal“.
Kreditinė kortelė
Elegantiška atsiskaitymas mokant kortele skiriasi nuo kitų ir remiasi viršuje esančią kredito kortelę kad žemiau būtų visa forma su skirtingais duomenimis, kuriuos klientas turi užpildyti norėdamas atlikti mokėjimą el. prekyboje.
Žingsnis po žingsnio forma
Un žingsnis po žingsnio forma registracijai atlikti HTML, CSS ir „JavaScript“. Keturi žingsniai kiekvienam iš taškų esančią kairėje pusėje. Puikiai užbaigtos animacijos puikiai užbaigtai formai. Labai rekomenduojama.
Interaktyvi forma
Un interaktyvi forma daugkartinis leidimas su HTML, CSS ir „JavaScript“. Jis išsiskiria perėjimo animacija tarp kiekvieno žingsnio. Jis turi elegantišką prisilietimą, kuris neliks nepastebėtas.
Žingsnis po žingsnio forma
tai žingsnis po žingsnio forma išsiskiria tuo, kad yra gana kūrybingas. Jūs atsakysite į klausimus kad galėtumėte bet kada grįžti prie jų, visą laiką būdami vizualiai ekrane.
Žingsnis po žingsnio
Žingsnis po žingsnio forma padaryta HTML, CSS ir „JavaScript“. Jam būdinga perėjimo animacija tarp kiekvieno žingsnio.
Daugiapakopė „Jquery“ forma
Jei turite labai ilga forma, tai puikiai tinka skirtingoms sekcijoms su labai ryškia progreso juosta. Remiantis „jQuery“ ir CSS, jis išsiskiria savo dizainu ir puikia elegancija.
Vartotojo sąsajos animacijos forma
To perėjimai Vartotojo sąsajos animacijos forma jie yra remiantis Dominku Marskusiciu. Dėmesio į mėlynojo langelio kūrybinį efektą, kai spustelėsime kai kuriuos iš dviejų prisijungimo laukų.
Paskyros sukūrimo / prisijungimo forma
Triukas prisijungimas ir paskyros sukūrimas kuri paremta animacija kas vyksta tarp tų dviejų skyrių. Labai dabartinis ir įspūdingas HTML, „JavaScript“ ir CSS buvimas.
Gyvatės paryškinimas
Gyvatės paryškinimas yra vienas ryškiausių prisijungimų prie visų sąrašų išsiskiria elegantiška animacija tai greitai atsiranda tuo momentu, kai spustelėjame vieną iš dviejų laukų.
Prisijungimo ekranas
Dieviškas šis dizainas prisijungimo ekranas taip pat ir jų animacijos ir kaip tai kūrybinga. Jei norite būti naujausias, kai kalbate apie interneto dizainą, šios formos negalima praleisti. Būtinas.
Prisijungimo sąsajos dizainas
Sukurta naudojant HTML, „Sass“ ir „jQuery“. Prisijungimo sąsajos dizainas es elegantas ir aiškus tema, kurioje netrūksta subtilių animacijų, kad taptų dar vienu iš mėgstamiausių sąraše.
Prisijungimas ir vartotojo sąsajos sukūrimas
Specialus prisijungimo dizainas ir paskyros kūrimo vartotojo sąsaja spalvoms ir pateikimui viena didelė kortelė - dvi dalys. Dar viena gražiausių egzekucijos, kurios negalime praleisti. Pagaminta HTML, CSS ir „JavaScript“.
Nemalonios klaidos
Nemalonios klaidos Tai puikus prisijungimas dėl laukai su nemaloniais.css. Originalus, kad būtų įdomus, nerūpestingas ir labai skirtingas prisijungimas. Originalus be jokių abejonių mūsų svetainei.
Prisijunkite prie CSS HTML
Smalsus prisijungimas skirtingomis piktogramomis rodantys, kad kiekvienas laukas nuveš lankytoją kur tik norime. Taip pat išsiskiria spalvomis pasirinkti atspalviai. Jame nėra animacijos. Jis sukurtas HTML ir CSS, kad jis būtų įdiegtas kliento ar mūsų pačių svetainėje.
Modalinė prisijungimo forma
tai Modalinė prisijungimo forma yra įkvėpta lietuvių kalbos dizainas žinomas dėl medžiagų dizaino. Tai matėme daugelyje programų mobiliuosiuose įrenginiuose. Šiame kode turime prisijungimo skydą ir registracijos skydelį, kuris pagal numatytuosius nustatymus yra paslėptas. Registracijos skydelį galima suaktyvinti spustelėjus mėlyną stulpelį dešinėje pusėje. Ji turi puikią animaciją, kad būtų labai ypatingas ir ryškus prisijungimas.
Forma „flexbox“
Paieškos formas pradedame tuo forma remiantis „flexbox“. Jis išsiskiria raudona „paieškos“ spalva ir šiek tiek daugiau - elegantišku jūsų svetainės paieškos lauku.
Animuota dėžutė
Su tuo animacinė dėžutė spustelėkite didinamojo stiklo piktogramą ir pasirodys ryškiai mėlyna animacija kad mums tereikėtų įvesti paiešką, kurią atliksime svetainėje. Pagaminta naudojant HTML, CSS ir „JavaScript“.
Paieškos laukas
A didelė linija eina per ekraną kad jį paspaudę pradėtume rašyti paiešką. Tai apibūdinantis mygtukas paprasta paieškos forma.
Spustelėkite paprastą paieškos lauką
Spustelėkite paprastą paieškos lauką remiasi sąveika, matyta „Waze“ vairuotojų bendruomenės programa transporto priemonė. Visos piktogramos ir vaizdai daromi naudojant CSS. Jis išsiskiria tomis piktogramomis, kurios leidžia mums atlikti konkrečias produkto ar paslaugos paieškas. Stebina dėl to, kaip šaunu.
CSS teksto įvesties efektas
CSS teksto įvesties efektas apima seriją animacijos tekste ir paieškos stalčiuje būti atidus formos ieškotojas.
Paieška visame ekrane
Šis įrašas iš paieška visame ekrane jis veikia su bet kokio tipo išdėstymu ar padėtimi. Reikalingi stiliai konkretaus konteinerio ir paieškos perdangos elementas būti šaknyje. Jai būdinga šokinėjanti animacija tuo momentu, kai paspaudžiame paieškos mygtuką.
Paieška
Un paieškos forma tai paprasta jis mėgsta žaisti su skirtingomis pozicijomis ir animacijos. Spustelėkite paieškos mygtuką ir pasirodys visas stalčius, kuriame bus įvesti žodžiai. Labai aktuali ir labai rekomenduojama, kaip paprasta.
Jokių klausimų
Jokio klausimo es paprasta forma su teksto lauku ir galimybė pasirinkti keletą atsakymų, kuriuos vartotojas gali pasirinkti. Puikiai vizualiai, kad būtų vienas geriausių.
Iššokanti prenumeratos forma
Su šiuo iššokanti prenumeratos forma, mes spustelėsime plūduriuojantį mygtuką ir jis mus nuveš labai juokingo tono forma ir lauką, kur įvesti el. pašto adresą. Puikiai tinka el. Pašto rinkodarai.
Prenumeratos laukelio vartotojo sąsaja
A prenumeratos langelis su pavojaus varpu ir šiek tiek daugiau nei plokščios spalvos Projekte.
CSS prenumeratos laukelis
A išmanioji prenumeratos dėžutė už faktą naudoti gradientus mygtukui „užsiprenumeruoti“ kaip purpurinis lauko atspalvis.
Prenumeratos laukelis
A paprasta prenumeratos dėžutė bet pagal dizainą turi didelį poveikį.
EMOJI patvirtinimo forma
Grynai CSS tai patvirtinimo forma sukurti raktą arba slaptažodį. Kaip mes rašome, jaustukas išmatuos formos saugumo lygį. Juokinga ir smalsu be jokios abejonės.
Nepraleiskite to sąrašas 23 animacinių rodyklių CSS.
Puikus čia pateiktų pavyzdžių pavyzdys. Įvairovė ir pritaikymas skirtingiems kontekstams, o geriausias dalykas yra tai, kad kiekvieno pavadinimo nuorodoje yra demonstracinė versija ir šaltinio kodas, nors turėtumėte tai pabrėžti mygtuku „Žiūrėti demonstraciją“, nes iš smalsumo atradau jį pavadinime . Ačiū už indėlį. Sveikinimai iš Karakaso.
Tai man labai padėjo, ačiū.