40 HTML- en CSS-vorms vir rekeningregistrasie, betalings en meer Kreatiewe aanlyn
As daar iets is wat gewoonlik baie algemeen is vir enige soort webwerf, is dit die vorms. Die vorms wat ons gebruik om die kontakinligting in te vul, bankbesonderhede in te voer, aan te meld by 'n sosiale netwerk of doen eenvoudig 'n soektog soos ons gewoonlik daagliks in die Google-soekenjin doen.
So vandag gaan ons jou wys 40 vorms in CSS wat wissel van kontakvorms, kredietkaartafrekenings, aanmeldings, eenvoudige, intekening of selfs validering. 'N Reeks vorms van elegansie en styl wat u spesiale punt aan u webwerf gee, ongeag die tema.
1 Minimalistiese kontakvorm
2 Minimalistiese vorm
3 Vintage kontakvorm
4 Kontakvorm vir brief
5 Uitgebreide kontakvorm
6 Kontakvorm UI
7 Betaalkaart afhandeling
8 Kredietkaart plat ontwerp
9 UI vir kredietkaart
10 Reageer betaalpunt
11 Betaalkaart by die betaalpunt
14 Stap vir stap vorm
15 Interaktiewe vorm
16 Stap vir stap vorm
17 Paso n PASO
18 Meervoudige stap Jquery vorm
20 Rekeningvorm / aanmeldingsvorm
21 Slang Hoogtepunt
24 Aanmelding en UI-rekening skep
25 Onnodige foute
26 Teken CSS HTML aan
27 Modale aanmeldingsvorm
28 Vorm flexbox
29 Animated box
31 Eenvoudige soekveld klik op
33 Volledige skerm soek
35 Geen vrae nie
36 Pop-up inskrywingsvorm
Ander minimale vorm, hoewel slegs in CSS 'n eenvoudige en hoë effek vorm. Dit het nie die minimalistiese animasies van die vorige nie, maar dit kan baie goed bereik word.
Vintage kontakvorm, 'n baie elegante ontwerp. Reageer op daardie webwerwe vanaf mobiel gesien te word, hoewel dit nie geldigheid insluit nie.
Kontakvorm vir brief
hierdie Kontak Vorm dit het 'n taamlike nuuskierige animasie: 'n brief word gevorm. Eenvoudig, maar baie nuttig met baie kleur.
hierdie uitgebreide kontakvorm Dit is slegs voorkant en het die validering met jQuery. Ons klik op die drywende knoppie en die vorm verskyn met 'n lewendige animasie. Uitstaande.
Kontakvorm UI dit is 'n vorm wat in HTML en CSS gemaak is. Dit staan ​​uit om te wees 'n eenvoudige kontakkaart wat ons kan invul sodat slegs die teksveld verander wanneer daar gekliek word.
Kredietkaart plat ontwerp
Suiwer CSS vir 'n afhandeling vir kredietkaarte in plat kleure. Kleurvol en baie eenvoudig wat kwaliteit en professionaliteit kan aandui.
UI vir kredietkaart
Reageer betaalpunt, gemaak met React.js, word onderskei deur die syprent wat ons kan aanpas met die dienste of produkte wat ons in ons e-handel verkoop.
Betaalkaart by die betaalpunt
Hierdie betaalpunt val op die moontlikheid om 'n beeld op die kaart te plaas. A eenvoudige en duidelike vorm gemaak met CSS3, HTML5 en 'n bietjie jQuery. Hoë gehalte en anders as die res van die betaalpunte op hierdie lys. U kan dit aflaai hier hierdie betaalkaart afreken.
'N Elegante betaalpunt vir kaartbetaling anders as die ander en gebaseer op 'n kredietkaart aan die bokant sodat ons hieronder die volledige vorm bevat met die verskillende gegewens wat die kliënt moet invul om die betaling in die e-handel te doen.
Stap vir stap vorm
hierdie stap vir stap vorm staan ​​uit omdat hy redelik kreatief is. U sal die vrae beantwoord sodat u te alle tye na hulle kan terugkeer deur die hele tyd visueel op die skerm te wees.
Meervoudige stap Jquery vorm
As jy 'n baie lang vorm, Dit is ideaal vir verskillende afdelings met 'n baie opvallende vorderingsbalk. Gebaseer op jQuery en CSS, staan ​​dit uit vir sy ontwerp en sy groot elegansie.
Die oorgange hiervan UI-animasievorm están gebaseer op Domink Marskusic. Let op die kreatiewe effek van die blou blokkie as ons op sommige van die twee aanmeldvelde klik.
Rekeningvorm / aanmeldingsvorm
Slang Hoogtepunt is een van die opvallendste aanmeldings van enige lys wat staan ​​uit vir die elegante animasie dit verskyn vinnig sodra ons op een van die twee velde klik.
Goddelike hierdie ontwerp aanmeldskerm so is hulle ook animasies en hoe kreatief dit is. As u die nuutste wil wees wat webontwerp betref, kan hierdie vorm nie gemis word nie. Onmisbaar.
Ontwerp met behulp van HTML, Sass en jQuery. Aanteken-UI-ontwerp es elegant en duidelik oor die onderwerp wat nie subtiele animasies ontbreek nie, om een ​​van die gunstelinge op die lys te word.
Aanmelding en UI-rekening skep
Onnodige foute Dit is 'n uitstekende aanmelding as gevolg van die animasie van velde met onaangenaam.css. Oorspronklik om 'n prettige, sorgvrye en heel ander aanmelding te wees. Oorspronklik sonder enige twyfel vir ons webwerf.
Teken CSS HTML aan
'N Nuuskierige aanmelding deur die verskillende ikone wat elk van die velde wys om die besoeker te neem waar ons wil. Die skakerings wat in die kleure gekies word, val ook op. Dit het geen animasie nie. Dit word in HTML en CSS gemaak om dit op die webwerf te implementeer vir 'n kliënt of ons eie.
hierdie Modale aanmeldingsvorm is geïnspireer deur die taal van ontwerp bekend vir Materiaalontwerp. Ons het dit in baie toepassings op mobiele toestelle gesien. In hierdie kode het ons 'n aanmeldpaneel en 'n registrasiepaneel wat verstek is. Die registrasiepaneel kan geaktiveer word deur op die blou kolom aan die regterkant te klik. Dit het 'n uitstekende animasie om 'n baie spesiale en opvallende aanmelding te wees.
Ons begin die soekvorms hiermee vorm gebaseer op flexbox. Dit staan ​​uit vir die rooi kleur van die «soektog» en vir bietjie meer vir 'n elegante soekveld vir u webwerf.
'n groot lyn loop oor die skerm sodat wanneer ons daarop druk, ons die soektog begin tik. 'N Pick-up-knoppie om dit te definieer eenvoudige soekvorm.
Eenvoudige soekveld klik op
Eenvoudige soekveld klik op is gebaseer op 'n interaksie gesien in die Waze Driver Community-app voertuig. Alle ikone en beelde word met CSS gemaak. Dit val op vir die ikone wat ons toelaat om spesifieke soektogte na 'n produk of diens uit te voer. Opvallend vanweë hoe cool dit is.
CSS-teksinvoer-effek sluit 'n reeks van animasies in teks en soeklaai om 'n versigtige soeker in vorm te wees.
Volledige skerm soek
Hierdie inskrywing van volskermsoek dit werk met enige tipe uitleg of posisie. Vereis style houerspesifieke en soek-oortrek-element om in die wortel geleë te wees. Dit word gekenmerk deur 'n weerkaatsende animasie sodra ons op die soekknoppie druk.
Un soekvorm eenvoudig dat hy speel graag met die verskillende posisies en animasies. Ons klik op die soekknoppie en die volledige laai verskyn om die woorde in te tik. Baie aktueel en sterk aanbeveel vir hoe eenvoudig dit is.
Geen vrae nie
Geen vraag nie es eenvoudige vorm met teksveld en die opsie om antwoorde te kies vir die gebruiker om dit te kies. Baie visueel om een ​​van die beste te wees.
Met hierdie pop-up inskrywingsvorm, klik ons ​​op die drywende knoppie en dit sal ons neem vorm met 'n baie snaakse toon en 'n veld waar u die e-pos moet invoer. Ideaal vir e-posbemarking.
'n intekenaarkassie met 'n alarmklok en bietjie meer as plat kleure In die ontwerp.
'n slim intekenkassie vir die feit van gebruik gradiënte vir die intekenknoppie, net soos die pers tint van die veld.
'n eenvoudige intekenaarkassie maar van groot effek deur ontwerp.
In suiwer CSS hierdie bekragtigingsvorm om die sleutel te skep of wagwoord. Terwyl ons skryf, meet die emoji die veiligheidsvlak van die vorm. Snaaks en nuuskierig sonder twyfel.
Moet dit nie misloop nie lys van 23 geanimeerde pyle in CSS.
Volledige pad na artikel: Aanlyn kreatiewe » tegnologie » CSS » 40 CSS-vorms wat op geen webwerf ontbreek nie
Uitstekende voorbeeld van voorbeelde wat hier aangebied word. Die verskeidenheid en aanpassing aan verskillende kontekste en die beste ding is dat die skakel van elke titel die demo en die bronkode bevat, alhoewel u dit met 'n knoppie moet uitlig «Sien demo» omdat ek uit nuuskierigheid dit in die titel. Dankie vir die bydrae. Groete uit Caracas.