Edozein webgune motarako normalean oso ohikoa den zerbait badaude, inprimakiak dira. Harremanetarako informazioa betetzeko erabiltzen ditugun inprimakiak, sartu banku datuak, sartu sare sozial batean edo, besterik gabe, egin Google bilaketa motorrean egunero egiten dugun bezalako bilaketa.
Beraz, gaur erakutsiko dizuegu 40 inprimaki CSSn harremanetarako inprimakiak, kreditu txartelaren ordainketak, saio hasiera, sinpleak, harpidetzak edo baliozkotzea. Dotorezia eta estilo handiko forma sorta zure webguneari puntu berezi hori emateko, gaia edozein dela ere.
Index
- 1 Harremanetarako formulario minimalista
- 2 Forma minimalista
- 3 Vintage harremanetarako inprimakia
- 4 Gutunetarako harremanetarako inprimakia
- 5 Zabaldutako harremanetarako inprimakia
- 6 Harremanetarako formularioaren IU
- 7 Ordainketa txartelaren ordainketa
- 8 Kreditu txartelaren diseinu laua
- 9 Kreditu txartelaren UI
- 10 Erreakzionatu Checkout
- 11 Ordainketa ordainketa txartela
- 12 Kreditu txartelaren ordainketa
- 13 Kreditu txartela
- 14 Urratsez urrats inprimakia
- 15 Forma interaktiboa
- 16 Urratsez urrats inprimakia
- 17 Pausoz pauso
- 18 Urrats anitzeko Jquery inprimakia
- 19 UI animazio inprimakia
- 20 Kontua sortzeko / saioa hasteko inprimakia
- 21 Suge Highlight
- 22 Saioa hasteko pantaila
- 23 Saioa hasteko UI diseinua
- 24 Saioa hasi eta IU kontua sortzea
- 25 Akats okerrak
- 26 Saioa hasi CSS HTML
- 27 Saio hasiera modala
- 28 Formulario flexbox
- 29 Kaxa animatua
- 30 Bilaketa-eremua
- 31 Bilaketa eremu sinple bat egin klik gainean
- 32 CSS testua sartzeko efektua
- 33 Pantaila osoko bilaketa
- 34 Bilatu
- 35 Galderarik ez
- 36 Popup harpidetza inprimakia
- 37 Harpidetza kutxa UI
- 38 CSS harpidetza kutxa
- 39 Harpidetza kutxa
- 40 EMOJI baliozkotzeko inprimakia
Harremanetarako formulario minimalista
A-rekin harremanetarako inprimaki sinplea efektu barietate handia hala nola, marka mugikorrak edo lerro-animazioak. CSS kode dotorea JavaScript pixka batekin. Bilaketa bila bazabiltza harremanetarako inprimaki minimalista hau ezin hobea da zuretzat.
Forma minimalista
Beste forma minimoa, CSSn soilik izan arren efektu sinplea eta efektu handikoa. Ez ditu aurrekoaren animazio minimalistak, baina oso ondo betetzen du bere helburua.
Vintage harremanetarako inprimakia
Vintage harremanetarako inprimakia, oso diseinu dotorea. Webgune horien erantzule mugikorretik ikusteko, baliozkotzea barne hartzen ez duen arren.
Gutunetarako harremanetarako inprimakia
Hau kontaktu formularioa animazio bitxi samarra du: gutun bat osatzen da. Sinplea, baina oso erabilgarria kolore askorekin.
Zabaldutako harremanetarako inprimakia
Hau zabaldutako harremanetarako inprimakia Front end bakarra da eta badu jQuery-rekin baliozkotzea. Mugikorreko botoian klik egiten dugu eta inprimakia animazio biziarekin agertuko da. Bikaina.
Harremanetarako formularioaren IU
Harremanetarako formularioaren IU HTMLn eta CSSn egindako inprimakia da. Izateagatik nabarmentzen da harremanetarako txartel soil bat bete dezakegula, klik egitean testu eremua soilik aldatzeko.
Ordainketa txartelaren ordainketa
Un ordainketa txartelaren ordainketa HTML, CSS eta JavaScript-en egina animazio birakariagatik bereizten da kreditu txartela CVC edo segurtasun zenbakiaren eremua sakatzen dugunean.
Kreditu txartelaren diseinu laua
CSS hutsa a ordainketa egiteko kreditu txartelak kolore lauetan. Koloretsua eta oso sinplea, kalitatea eta profesionaltasuna adierazteko gai dena.
Kreditu txartelaren UI
HTML, CSS eta JavaScript beste kreditu txartel bat zein ona den nabarmentzen da diseinu orokorra aukeratu du. Zure webguneko kode zati honetako animazioak ahaztu zaizkigu. Deskargatu esteka honetan.
Erreakzionatu Checkout
Erreakzionatu Checkout, React.js-rekin egina, bereizten da pertsonaliza dezakegun alboko argazkia gure merkataritza elektronikoan saltzen ditugun zerbitzu edo produktuekin.
Ordainketa ordainketa txartela
Ordainketa hau txartelean irudia jartzeko aukeragatik nabarmentzen da. A CSS3, HTML5ekin egindako inprimaki sinple eta argia eta jQuery pixka bat. Kalitate handikoa eta zerrenda honetako gainerako ordainketen desberdina. Deskargatu dezakezu hemen ordainketa txartelaren ordainketa hau.
Kreditu txartelaren ordainketa
Hau kreditu txartelarekin ordaintzeko orria programarekin programatuta dago JavaScript DOM manipulatzeko. Diseinuan gogora dezakezu Stripe kode dotorea, PayPal-era gero eta gertuago dagoen banku digitaleko zerbitzua.
Kreditu txartela
Dotorea txartela ordaintzeko ordainketa besteengandik desberdina eta oinarritzat hartuta goialdean dagoen kreditu txartela beraz, jarraian inprimaki osoa dugu bezeroak eCommerce-n ordainketa egiteko bete behar dituen datu desberdinekin.
Urratsez urrats inprimakia
Un urratsez urrats forma HTML, CSS eta Javascript-en egindako erregistroa lortzeko. Lau urrats puntu bakoitzeko ezkerreko aldean dago. Oso amaitutako inprimakirako ondo bukatutako animazioak. Oso gomendatua
Forma interaktiboa
Un forma interaktiboa HTML, CSS eta JavaScript-ekin egindako hainbat urrats. Pauso bakoitzaren arteko trantsizioko animazioagatik nabarmentzen da. Oharkabean pasatuko ez den ukitu dotorea du.
Urratsez urrats inprimakia
Hau urratsez urrats forma nahiko sortzailea izateagatik nabarmentzen da. Galderak erantzungo dituzu edozein momentutan haietara itzul zaitezke, pantailan denbora guztian ikusmenean egonik.
Pausoz pauso
Urratsez urrats inprimakia egina HTML, CSS eta Javascript-en. Pauso bakoitzaren arteko trantsiziozko animazioa du ezaugarri.
Urrats anitzeko Jquery inprimakia
Bat baduzu oso forma luzeaHau ezin hobea da aurrerapen barra oso deigarria duten atal desberdinetarako. JQuery eta CSS oinarritzat hartuta, diseinuagatik eta dotoreziagatik nabarmentzen da.
UI animazio inprimakia
Honen trantsizioak UI animazio inprimakia dira Domink Marskusic-en oinarrituta. Arreta urdinez dagoen koadroaren efektu sortzaileari saioa hasteko edo saioa hasteko bi eremuetako batzuetan klik egiten dugunean.
Kontua sortzeko / saioa hasteko inprimakia
Trikimailu bat saioa hasi eta kontua sortzea animazioan oinarrituta dagoena bi atal horien artean zer gertatzen den. Gaur egungo presentzia oso deigarria HTML, JavaScript eta CSS-n egiteko.
Suge Highlight
Suge Highlight Edozein zerrendetako saio hasiera deigarrienetako bat da animazio dotoreagatik nabarmentzen da hori azkar sortzen da bi eremuetako batean klik egiten dugun unean.
Saioa hasteko pantaila
Diseinu hau jainkotiarra saioa hasteko pantaila beraienak ere bai animazioak eta zein sormen duen. Web diseinuari dagokionez gaurkotasuna izan nahi baduzu, inprimaki hau ezin da galdu. Ezinbesteko.
Saioa hasteko UI diseinua
HTML, Sass eta jQuery erabiliz diseinatu da. Saioa hasteko UI diseinua es eleiala eta argia animazio sotilik ez duen gaiari buruz, zerrendako beste gogokoenetako bat bihurtzeko.
Saioa hasi eta IU kontua sortzea
Berezia saio hasiera diseinua eta kontua sortzea UI koloreak eta aurkezpena egiteko karta handi bat bi atalak. Ezin dugu galdu exekuzioaren ederrenetakoa. HTML, CSS eta JavaScript-en egina.
Akats okerrak
Akats okerrak Saio hasiera bikaina da obnoxious.css duten eremuak. Jatorrizkoa saio dibertigarri, arduragabe eta oso desberdina izateko. Jatorrizkoa inolako zalantzarik gabe gure webgunerako.
Saioa hasi CSS HTML
Saio hasiera bitxia ikono desberdinen arabera zelai bakoitza erakusten duten bisitaria nahi dugun lekura eramateko. Koloreetan aukeratutako tonuak ere nabarmentzen dira. Ez du animaziorik. HTML eta CSS bidez egina dago bezeroarentzako edo gurearentzako webgunean inplementatzeko.
Saio hasiera modala
Hau Saio hasiera modala hizkuntza hizkuntzan inspiratuta dago diseinua Material Diseinuagatik ezaguna. Gailu mugikorretako aplikazio askotan ikusi dugu. Kode honetan lehenespenez ezkutatuta dagoen saio hasiera panela eta erregistro panela ditugu. Erregistro panela eskuinaldean dagoen zutabe urdinean klik eginez aktiba daiteke. Animazio bikaina du oso saio berezi eta deigarria izateko.
Formulario flexbox
Bilaketa inprimakiak honekin hasten ditugu Sasoi flexbox-en oinarrituta. «Bilaketa» ren kolore gorriagatik nabarmentzen da eta zure webgunerako bilaketa-eremu dotoreagatik.
Kaxa animatua
Honekin animaziozko kutxa egin klik luparen ikonoan eta animazio urdin distiratsua agertuko da beraz, webgunean egingo dugun bilaketa idatzi behar dugu. HTML, CSS eta JavaScript-ekin egina.
Bilaketa-eremua
a lerro handia pantailan zehar doa beraz, sakatzen dugunean bilaketa idazten hasiko gara. Hau definitzeko biltzeko botoia bilaketa inprimaki sinplea.
Bilaketa eremu sinple bat egin klik gainean
Bilaketa eremu sinple bat egin klik gainean urtean ikusitako elkarreraginean oinarritzen da Waze Driver Community aplikazioa ibilgailu. Ikono eta irudi guztiak CSSrekin eginda daude. Produktu edo zerbitzu baten bilaketa zehatzak egiteko aukera ematen diguten ikonoengatik nabarmentzen da. Deigarria zein freskoa den.
CSS testua sartzeko efektua
CSS testua sartzeko efektua serie bat biltzen du animazioak testuan eta bilaketa-tiraderan forman bilatzaile zaindua izateko.
Pantaila osoko bilaketa
Sarrera hau pantaila osoko bilaketa edozein diseinu edo posizio motarekin funtzionatzen du. Estiloak eskatzen ditu edukiontzi espezifikoa eta bilaketa gainjarritako elementua erroan kokatzeko. Bilaketa botoia sakatzen dugun momentuan erreboteko animazioa du ezaugarri.
Bilatu
Un bilaketa orria erraza hori postu desberdinekin jolastea gustatzen zaio eta animazioak. Bilaketa botoian klik egiten dugu eta tiradera osoa agertzen da hitzak idazteko. Oso egungoa eta oso gomendagarria zein erraza den.
Galderarik ez
Galderarik ez es inprimaki sinplea testu-eremuarekin eta erabiltzaileak erantzun batzuk hautatzeko aukera. Ikusmen handia, onenetarikoa izateko.
Popup harpidetza inprimakia
Honekin popup harpidetza inprimakia, botoia mugikorrean klik egiten dugu eta honetara eramango gaitu forma oso tonu dibertigarriarekin eta posta elektronikoa sartzeko eremua. Ezin hobea posta elektronikoa merkaturatzeko.
Harpidetza kutxa UI
a harpidetza kutxa iratzargailuarekin eta kolore lauak baino apur bat gehiago Diseinuan.
CSS harpidetza kutxa
a harpidetza kutxa adimenduna Izan ere erabili gradienteak harpidetzeko botoiaren eremuko tonu morea bezalakoa da.
Harpidetza kutxa
a harpidetza kutxa sinplea baina diseinuaren eragin handia du.
EMOJI baliozkotzeko inprimakia
Hutsean CSS hau baliozkotze inprimakia giltza sortzeko edo pasahitza. Idazten ari garen bitartean, emotikonoek inprimakiaren segurtasun maila neurtuko dute. Dibertigarria eta bitxia zalantzarik gabe.
Ez galdu hau CSSko 23 gezi animatuen zerrenda.
2 iruzkin, utzi zurea
Hemen aurkezten diren adibideen lagin bikaina. Testuinguru desberdinetara egokitzea eta egokiena, eta onena da izenburu bakoitzaren estekak demoa eta iturburu kodea biltzen dituela, nahiz eta "Ikusi demoa" botoiarekin nabarmendu beharko zenituzkeen, izenburuan aurkitu nuen jakin-minagatik. . Eskerrik asko ekarpenagatik. Agurrak Caracasetik.
Asko lagundu dit, eskerrik asko.