Kui on midagi, mis on tavaliselt igat tüüpi veebisaitide jaoks väga levinud, on need vormid. Vormid, mida kasutame kontaktandmete täitmiseks, sisestage pangaandmed, logige suhtlusvõrku sisse või tehke lihtsalt otsing, nagu tavaliselt Google'i otsingumootoris igapäevaselt.
Nii et täna näitame teile 40 vormi CSS-is alates kontaktivormidest, krediitkaardikassadest, sisselogimistest, lihtsatest, tellimustest või isegi valideerimisest. Suurepärase elegantsi ja stiiliga vormide seeria, et anda oma veebisaidile see eriline punkt, sõltumata teemast.
Minimalistlik kontaktivorm
Lihtne kontaktvorm a-ga väga erinevaid efekte näiteks ujuvad märgid või jooneanimatsioonid. Elegantne CSS-kood koos natuke JavaScripti. Kui otsite a minimalistlik kontaktvorm see sobib teile ideaalselt.
Minimalistlik vorm
Muu minimaalne vorm, kuigi ainult CSS-is olla lihtne ja suure mõjuga vorm. Sellel ei ole eelmise minimalistlikke animatsioone, kuid see täidab oma eesmärki väga hästi.
Vintage kontaktvorm
Vintage kontaktvorm, väga elegantne disain. Tundlik nende veebisaitide jaoks mobiililt nähtav, kuigi see ei sisalda valideerimist.
Kirja kontakti vorm
see kontakt vormi sellel on üsna uudishimulik animatsioon: moodustub kiri. Lihtne, kuid rohke värviga väga kasulik.
Laiendatud kontaktivorm
see laiendatud kontaktivorm See on ainult esiosa ja sellel on valideerimine jQuery abil. Klõpsame hõljuval nupul ja vorm ilmub koos elava animatsiooniga. Väljapaistev.
Kontaktivormi kasutajaliides
Kontaktivormi kasutajaliides see on vorm, mis on tehtud HTML-is ja CSS-is. See paistab silma olemise poolest lihtne kontaktkaart mida saame täita nii, et sellel klõpsamisel muutub ainult tekstiväli.
Maksekaardi kassas
Un maksekaardi kassas tehtud HTML, CSS ja JavaScript mis eristab pöörlev animatsioon krediitkaardi vajutame hetkel väljale CVC või turvanumber.
Krediitkaardi tasane kujundus
Puhas CSS a kassasse lamedates toonides krediitkaardid. Värvikad ja väga lihtsad, mis on võimelised tähistama kvaliteeti ja professionaalsust.
Krediitkaardi kasutajaliides
Teine HTML-, CSS- ja JavaScripti krediitkaart, mis paistab silma selle hea kvaliteediga valis üldise kujunduse. Unustasime selles veebisaidi koodijupis olevad animatsioonid. Laadige see sellelt lingilt alla.
Reageeri kassasse
Reageeri kassasse, mis on tehtud veebisaidiga React.js, eristub külgpilt, mida saame kohandada teenuste või toodetega, mida me oma e-kaubanduses müüme.
Checkouti maksekaart
See kassas paistab silma võimalus kaardile pilt panna. A lihtne ja selge vorm, mis on tehtud CSS3, HTML5 abil ja natuke jQueryd. Kvaliteetne ja erinev selles nimekirjas olevatest kassadest. Saate alla laadida siin see maksekaardi kassas.
Krediitkaardimakse
see krediitkaardimakse vorm on programmeeritud harjutama JavaScripti DOM-i manipuleerimiseks. Kujunduses saate meenutada PayPalile lähemale jõudva digitaalse pangateenuse Stripe elegantset koodi.
Krediitkaart
Elegantne kassas kaardimakse teistest erinev ja põhineb krediitkaart, mis asub ülaosas Nii et allpool on kogu vorm koos erinevate andmetega, mis klient peab e-kaubanduses makse sooritamiseks täitma.
Samm-sammult vorm
Un samm-sammult vorm registreerimiseks HTML, CSS ja JavaScript. Neli sammu iga punkti jaoks asub vasakul küljel. Hästi viimistletud vormi jaoks hästi viimistletud animatsioonid. Väga soovitatav
Interaktiivne vorm
Un interaktiivne vorm HTML-i, CSS-i ja JavaScripti abil tehtud mitmeastmeline. See paistab silma sammude vahelise ülemineku animatsiooni poolest. Sellel on elegantne puudutus, mis ei jää märkamata.
Samm-sammult vorm
see samm-sammult vorm paistab silma üsna loova olemisega. Vastate küsimustele et saaksite nende juurde igal ajal tagasi pöörduda, olles kogu aeg ekraanil visuaalselt kohal.
Samm-sammult
Samm-sammult vorm valmis HTML-is, CSS-is ja JavaScriptis. Seda iseloomustab ülemineku animatsioon iga sammu vahel.
Mitmeastmeline Jquery vorm
Kui sul on väga pikk vorm, see sobib suurepäraselt väga silmapaistva edenemisribaga erinevate sektsioonide jaoks. JQuery ja CSS-i põhjal paistab see silma oma disaini ja suurepärase elegantsi poolest.
Kasutajaliidese animatsioonivorm
Selle üleminekud vormi kasutajaliidese animatsioon nad on põhineb Domink Marskusicil. Tähelepanu sinise kasti loomingulisele mõjule, kui klõpsame mõnel kahest sisselogimis- või seansi väljast.
Konto loomise / sisselogimise vorm
Trikk sisselogimine ja konto loomine mis põhineb animatsioonil mis nende kahe sektsiooni vahel juhtub. HTML-i, JavaScripti ja CSS-i puhul tuleb teha väga praegune ja silmatorkav kohalolek
Madu esiletõstmine
Madu esiletõstmine on üks kõige silmatorkavam sisselogimine mis tahes loendis paistab silma elegantse animatsiooni poolest see ilmub kiiresti hetkel, kui klõpsame ühel kahest väljast.
Sisselogimisekraan
Jumalik see kujundus sisselogimisekraan nii on ka nemad animatsioone ja kui loominguline see on. Kui soovite veebikujunduse osas kõige värskem olla, ei saa see vorm puududa. Asendamatu.
Sisselogimise kasutajaliidese kujundus
Kujundatud HTML, Sass ja jQuery abil. Sisselogimise kasutajaliidese kujundus es elegantne ja selge teemal, millel ei puudu peened animatsioonid, et saada loendis veel üheks lemmikuks.
Sisselogimise ja kasutajaliidese konto loomine
Eriline sisselogimise kujundus ja konto loomise kasutajaliides värvide ja esitusviiside jaoks üks suur kaart kaks sektsiooni. Veel üks kaunimaid hukkamises, millest me mööda ei pääse. Valmistatud HTML-is, CSS-is ja JavaScriptis.
Ebameeldivad vead
Ebameeldivad vead See on suurepärane sisselogimine väljad ebameeldiva.css-ga. Originaal on lõbus, muretu ja väga erinev sisselogimine. Originaal ilma igasuguse kahtluseta meie veebisaidi jaoks.
Logi sisse CSS HTML
Uudishimulik sisselogimine erinevate ikoonide abil mis näitavad, et kõik väljad viivad külastaja sinna, kuhu tahame. Samuti paistavad silma värvides valitud toonid. Sellel pole animatsiooni. See on tehtud HTML-is ja CSS-is, et seda kliendi või meie enda veebisaidil rakendada.
Modaalne sisselogimisvorm
see Modaalne sisselogimisvorm on inspireeritud eesti keelest materjalidisaini poolest tuntud disain. Oleme seda näinud paljudes mobiilseadmete rakendustes. Selles koodis on meil sisselogimispaneel ja registreerimispaneel, mis on vaikimisi peidetud. Registreerimispaneeli saab aktiveerida, klõpsates paremal küljel oleval sinisel veerul. Sellel on suurepärane animatsioon olla väga eriline ja silmatorkav sisselogimine.
Vormi flexbox
Sellega alustame otsinguvorme vorm põhineb flexboxil. See paistab silma otsingu punase värvi ja vähe rohkem oma veebisaidi elegantse otsinguvälja jaoks.
Animeeritud kast
Sellega animeeritud kast klõpsake suurendusklaasi ikooni ja ilmub erksinine animatsioon nii et peame sisestama ainult selle veebisaidil toimuva otsingu. Valmistatud HTML-i, CSS-i ja JavaScripti abil.
Otsinguväli
A. suur joon jookseb üle ekraani nii et kui me seda vajutame, hakkame otsingut tippima. Selle määratlemiseks nupp lihtne otsinguvorm.
Klõpsake lihtsal otsinguväljal
Klõpsake lihtsal otsinguväljal põhineb aastal vaadeldud suhtlusel Waze'i juhtide kogukonna rakendus sõiduk. Kõik ikoonid ja pildid on tehtud CSS-iga. See paistab silma nende ikoonide poolest, mis võimaldavad meil konkreetset toodet või teenust otsida. Silmatorkav, kui lahe see on.
CSS-i tekstisisestusefekt
CSS-i tekstisisestusefekt sisaldab rida animatsioonid tekstis ja otsingu sahtlis olla vormis ettevaatlik otsija.
Täisekraanil otsing
See kanne kasutajalt täisekraanil otsing see töötab mis tahes tüüpi paigutuse või asukohaga. Nõuab stiile konteinerispetsiifiline ja otsingu ülekatte element asuma juur. Seda iseloomustab kopsakas animatsioon hetkel, kui vajutame otsingunuppu.
Otsing
Un otsinguvorm see on lihtne talle meeldib mängida erinevate positsioonidega ja animatsioone. Klõpsame otsingu nupul ja sõnade sisestamiseks ilmub täielik sahtel. Väga ajakohane ja soovitatav, kui lihtne see on.
Küsimusi pole
Pole küsimust es lihtne vorm tekstiväljaga ja võimalus valida mõned vastused kasutajale nende valimiseks. Visuaalselt palju, et olla üks parimatest.
Hüpikakna tellimise vorm
Selle hüpikakna tellimise vorm, klõpsame ujuvnuppu ja see viib meid väga naljaka tooniga vorm ja väli, kuhu sisestada e-posti aadress. Ideaalne e-posti turundamiseks.
Tellimiskasti kasutajaliides
A. tellimiskast häirekellaga ja natuke rohkem kui lamedad värvid Kujunduses.
CSS-i tellimiskast
A. nutikas tellimiskast fakti eest kasutage gradiente tellimisnupu jaoks täpselt nagu välja lilla toon.
Tellimiskast
A. lihtne tellimiskast kuid kujunduslikult suur mõju.
EMOJI valideerimisvorm
Puhtas CSS see valideerimisvorm võtme loomiseks või parool. Nagu me kirjutame, mõõdab emotikon vormi turbetaset. Naljakas ja uudishimulik kahtlemata.
Ära jäta seda ilma CSS-i 23 animeeritud noole loend.
Suurepärane näidis näidetest siin. Mitmekesisus ja kohanemine erinevate kontekstidega ning parim on see, et iga pealkirja link sisaldab demot ja lähtekoodi, kuigi peaksite selle esile tõstma nupuga «Vaata demot», sest avastasin selle uudishimust pealkirjas . Täname panuse eest. Tervitused Caracasest.
See aitas mind palju, aitäh.