Kui on üks asi, mis on peaaegu igale veebisaidile ühine, siis on see vormid. Need vormid võimaldavad meil täita kontaktandmeid, sisestada pangarekvisiite, logida sisse sotsiaalvõrgustikku või lihtsalt teha otsinguid, nagu me iga päev Google'is teeme.
Seega näitame teile täna 40 CSS-vormi, alates kontaktvormidest ja krediitkaardimaksetest kuni sisselogimiste, lihtsate vormide, tellimisvormide ja isegi kinnitusvormideni. Seeria elegantseid ja stiilseid vorme, mis annavad teie veebisaidile erilise ilme, olenemata selle teemast.
Minimalistlik kontaktivorm
Lihtne kontaktvorm paljude efektidega , näiteks ujuvate markerite ja joonanimatsioonidega. Elegantne CSS-kood JavaScripti lisandiga. Kui otsite minimalistlikku kontaktvormi, on see teie jaoks ideaalne.
Minimalistlik vorm
Veel üks minimalistlik vorm , mis on täielikult CSS-iga loodud lihtsaks, kuid samas väga tõhusaks . Sellel puuduvad eelmise vormi minimalistlikud animatsioonid, kuid see täidab oma eesmärki ideaalselt.
Vintage kontaktvorm
Vanaaegne kontaktvorm , väga elegantne disain. Kohanduv mobiilseadmetes kuvatavatele veebisaitidele , kuigi see ei sisalda valideerimist.
Kirja kontakti vorm
Sellel kontaktvormil on üsna huvitav animatsioon: see moodustab tähe . Lihtne, aga väga kasulik ja värvikas.
Laiendatud kontaktivorm
See laiendatud kontaktvorm on ainult esiotsa jaoks ja kasutab jQuery valideerimist . Ujuval nupul klõpsamine avab vormi erksa animatsiooniga. Esiletõstetud.
Kontaktivormi kasutajaliides
Kontaktvormi kasutajaliides on HTML-i ja CSS-i abil loodud vorm. See paistab silma lihtsa kontaktvormina , mida saab täita nii, et klõpsamisel muutub ainult tekstiväli.
Maksekaardi kassas
HTML-is, CSS-is ja JavaScriptis tehtud maksekaardimakse , mida iseloomustab animatsioon, mis pöörab krediitkaarti CVC-väljale või turvakoodile klõpsamisel.
Krediitkaardi tasane kujundus
Puhas CSS krediitkaardimakse jaoks lamedates värvides. Värvikas ja lihtne, kuid samas kvaliteeti ja professionaalsust edasi andev.
Krediitkaardi kasutajaliides
Veel üks HTML-is, CSS-is ja JavaScriptis krediitkaardi mall, mis paistab silma suurepärase üldise disaini poolest . Oleme teie veebisaidi jaoks sellest koodilõigust animatsioonid välja jätnud. Laadige see alla sellelt lingilt.
Reageeri kassasse
React.js-iga loodud React Checkout eristub külgpildi poolest, mida saame oma e-kaubanduses müüdavate teenuste või toodetega kohandada.
Checkouti maksekaart
See kassasüsteem paistab silma oma võimalusega maksekaardile pilti lisada. See on lihtne ja selge vorm, mis on loodud CSS3, HTML5 ja väikese jQuery lisamisega . Kvaliteetne ja erineb teistest selles nimekirjas olevatest kassasüsteemidest. Selle maksekaardi kassasüsteemi saate alla laadida siit .
Krediitkaardimakse
See krediitkaardimakse vorm on programmeeritud JavaScripti kasutamise harjutamiseks DOM-i manipuleerimiseks . Selle disain võib teile meelde tuletada Stripe'i elegantset koodi, mis on digitaalne pangandusteenus, mis on üha enam PayPali moodi.
Krediitkaart
Elegantne kaardimaksete kassasüsteem, mis erineb kõigist teistest ja mis põhineb ülaosas asuval krediitkaardil ning allolev vorm sisaldab erinevaid andmeid, mida klient peab e-kaubanduses makse sooritamiseks täitma.
Samm-sammult vorm
Samm -sammult registreerimisvorm, mis on loodud HTML-i, CSS-i ja JavaScripti abil. Neli sammu iga vasakul pool loetletud üksuse jaoks . Hästi teostatud animatsioonid loovad viimistletud vormi. Soovitan soojalt.
Interaktiivne vorm
Interaktiivne mitmeastmeline vorm, mis on loodud HTML-i, CSS-i ja JavaScripti abil . See paistab silma oma animeeritud üleminekute poolest iga sammu vahel. Sellel on elegantne puudutus, mis ei jää märkamatuks.
Samm-sammult vorm
See samm-sammult vorm paistab silma oma loomingulisuse poolest. Sa vastad küsimustele , et saaksid neid igal ajal vaadata, kuna need on ekraanil alati visuaalselt nähtavad.
Samm-sammult
Samm-sammult vorm, mis on loodud HTML-i, CSS-i ja JavaScripti abil . See sisaldab animeeritud üleminekuid iga sammu vahel.
Mitmeastmeline Jquery vorm
Kui sul on pikk vorm , siis on see oma selgelt eristuvate sektsioonide ja pilkupüüdva edenemisribaga ideaalne. See on loodud jQuery ja CSS-i baasil ning paistab silma oma disaini ja elegantsi poolest.
Kasutajaliidese animatsioonivorm
Selle kasutajaliidese animatsiooni üleminekud põhinevad Dominik Marskusici loomingul . Pange tähele sinise kasti loomingulist efekti, mis tekib sisselogimisväljal klõpsamisel.
Konto loomise / sisselogimise vorm
Visuaalselt pilkupüüdev sisselogimise ja konto loomise ekraan , mis tugineb nende kahe sektsiooni vahel mängitavale animatsioonile . HTML-i, JavaScripti ja CSS-iga loodud väga moodne ja pilkupüüdev.
Madu esiletõstmine
Snake Highlight on üks pilkupüüdvamaid sisselogimisi kogu nimekirjas, paistes silma elegantse animatsiooni poolest , mis ilmub kiiresti hetkel, kui klõpsame kummalgi kahest väljast.
Sisselogimisekraan
See sisselogimisekraani kujundus on jumalik tänu oma animatsioonidele ja loovusele . Kui soovid olla veebidisaini esirinnas, on see vorm kohustuslik. Absoluutselt hädavajalik.
Sisselogimise kasutajaliidese kujundus
HTML-i, Sassi ja jQuery abil loodud sisselogimise kasutajaliidese disain on elegantne ja selge ning teema sisaldab peeneid animatsioone, mis teeb sellest nimekirjas veel ühe lemmiku.
Sisselogimise ja kasutajaliidese konto loomine
Ainulaadne sisselogimise ja konto loomise kasutajaliidese disain, mis on tähelepanuväärne oma värvide ja mõlema jaotise ühel kaardil esitamise viisi poolest . Veel üks kaunilt teostatud näide, mida me ei saanud tähelepanuta jätta. Loodud HTML-i, CSS-i ja JavaScripti abil.
Ebameeldivad vead
Obnoxious Errors on suurepärane sisselogimisekraan tänu väljade animatsioonile, mis kasutab obnoxious.css-i . See on originaalne ja lõbus sisselogimisekraan, üsna ainulaadne ja kergemeelne. Kindlasti suurepärane täiendus meie veebisaidile.
Logi sisse CSS HTML
See sisselogimiskuva on ainulaadne tänu erinevatele ikoonidele , mis esindavad iga välja, juhatades külastajat soovitud teel. Valitud värviskeem on samuti tähelepanuväärne. See ei sisalda animatsioone. See on loodud HTML-i ja CSS-iga ning seda saab rakendada kliendi veebisaidil või teie enda tarbeks.
Modaalne sisselogimisvorm
See modaalne sisselogimisvorm on inspireeritud materjali disaini keelest , mida oleme näinud arvukates mobiilirakendustes. Kood sisaldab sisselogimispaneeli ja registreerimispaneeli, mis on vaikimisi peidetud. Registreerimispaneeli saab aktiveerida paremal asuval sinisel veerul klõpsates. Sellel on suurepärane animatsioon, mis muudab selle tõeliselt eriliseks ja pilkupüüdvaks sisselogimiseks.
Vormi flexbox
Alustame oma otsinguvormide sarja selle flexboxil põhineva vormiga . See paistab silma punase värviga otsinguväljal ja on stiilne täiendus teie veebisaidile.
Animeeritud kast
See animeeritud otsingukast võimaldab teil puudutada luubiikooni ja ilmub erksinine animatsioon , mis võimaldab teil lihtsalt otsingupäringu veebisaidile sisestada. Loodud HTML-i, CSS-i ja JavaScripti abil.
Otsinguväli
Üle kogu ekraani jookseb lai joon ; kui seda puudutate, saate hakata otsingut kirjutama. Seda lihtsat otsinguvormi määratleb pillikujuline nupp.
Klõpsake lihtsal otsinguväljal
Lihtne klõpsatav otsinguväli põhineb Waze'i rakenduses, mis on autojuhtide kogukond, nähtud interaktsioonil . Kõik ikoonid ja pildid on loodud CSS-iga. See paistab silma oma ikoonide poolest, mis võimaldavad meil teha toote või teenuse jaoks spetsiifilisi otsinguid. See on rabav oma nutikuse poolest.
CSS-i tekstisisestusefekt
CSS-tekstisisestusefekt sisaldab tekstis ja otsinguväljal animatsioonide seeriat , et vormiotsing oleks hoolikas.
Täisekraanil otsing
See täisekraaniotsingu kirje töötab mis tahes paigutuse või positsiooniga. See nõuab kindlaid konteineri stiile ja otsingu ülekatte elemendi paigutamist juurkataloogi. See sisaldab tagasilöögianimatsiooni otsingunupule klõpsamisel.
Otsing
Lihtne otsinguvorm , mis naudib erinevate positsioonide ja animatsioonidega mängimist. Otsingunupule klõpsamine avab sõnade sisestamiseks täistekstikasti. Väga moodne ja oma lihtsuse tõttu väga soovitatav.
Küsimusi pole
No Question on lihtne vorm tekstiväljaga ja valikuga vastuste valimiseks, mille hulgast kasutaja saab valida. See on visuaalselt suurepärane ja üks parimaid.
Hüpikakna tellimise vorm
Selle hüpikaknaga tellimisvormi puhul suunab ujuval nupul klõpsamine teid lõbusa ja kaasahaarava kujundusega vormile, kus on väli oma e-posti aadressi sisestamiseks. Ideaalne e-posti turunduse jaoks.
Tellimiskasti kasutajaliides
Äratuskellaga tellimiskarp , mille kujunduses on vaid ühevärvilised värvid .
CSS-i tellimiskast
Elegantne tellimiskast tänu tellimisnupu gradientidele ja välja lillale toonile.
Tellimiskast
Lihtne tellimiskarp , aga suurepärase disainiefektiga.
EMOJI valideerimisvorm
See parooli valideerimise vorm , mis on täielikult loodud CSS-ist , võimaldab teil luua kasutajanime või parooli. Tippimise ajal näitab emotikon vormi turvataset. Lõbus ja huvitav, kahtlemata.
Ära jäta vahele seda 23 animeeritud noole nimekirja CSS-is.