Inongo webgunetan galdu ezin diren CSS 40 inprimaki

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.

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.

Lotutako artikulua:

Web diseinurako kalitate handiko 23 CSS liburutegi

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.

Lotutako artikulua:

Doako 27 HTML eta CSS txartel blog, merkataritza elektroniko eta bestelakoetarako

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.