Inongo webgunetan galdu ezin diren CSS 40 inprimaki

Saioa hasteko inprimakia

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

forma-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

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

Vintage harremanetarako inprimakia, oso diseinu dotorea. Webgune horien erantzule mugikorretik ikusteko, baliozkotzea barne hartzen ez duen arren.

Gutunetarako harremanetarako inprimakia

Gutuna

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

Harremanetarako formulario zabala

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 formularioa

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

Checkout 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 kreditu txartela hutsa

CSS hutsa a ordainketa egiteko kreditu txartelak kolore lauetan. Koloretsua eta oso sinplea, kalitatea eta profesionaltasuna adierazteko gai dena.

Kreditu txartelaren UI

Pintxoak

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

Erreakzionatzeko

Erreakzionatu Checkout, React.js-rekin egina, bereizten da pertsonaliza dezakegun alboko argazkia gure merkataritza elektronikoan saltzen ditugun zerbitzu edo produktuekin.

Ordainketa ordainketa txartela

Popov

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

Stripe

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

Eguneko

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

Pausoz pauso

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

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

Pausoz pauso

Hau urratsez urrats forma nahiko sortzailea izateagatik nabarmentzen da. Galderak erantzungo dituzu edozein momentutan haietara itzul zaitezke, pantailan denbora guztian ikusmenean egonik.

Pausoz pauso

urrats

Urratsez urrats inprimakia egina HTML, CSS eta Javascript-en. Pauso bakoitzaren arteko trantsiziozko animazioa du ezaugarri.

Urrats anitzeko Jquery inprimakia

JQuery urrats anitza

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

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

Saioa hasteko sorkuntza

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

Snake

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

Saioa hasi

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

Saioa hasteko inprimakia

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

Saioa hasteko erregistroa

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

Nazkagarria

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

CSS

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

modal

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

Flexbox

Bilaketa inprimakiak honekin hasten ditugu Sasoi flexbox-en oinarrituta. «Bilaketa» ren kolore gorriagatik nabarmentzen da eta zure webgunerako bilaketa-eremu dotoreagatik.

Kaxa animatua

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

Push bilaketa

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

Waze

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 sarrera

CSS testua sartzeko efektua serie bat biltzen du animazioak testuan eta bilaketa-tiraderan forman bilatzaile zaindua izateko.

Pantaila osoko bilaketa

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

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

Galderarik ez es inprimaki sinplea testu-eremuarekin eta erabiltzaileak erantzun batzuk hautatzeko aukera. Ikusmen handia, onenetarikoa izateko.

Popup harpidetza inprimakia

Harpidetu

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

Harpidetza

a harpidetza kutxa iratzargailuarekin eta kolore lauak baino apur bat gehiago Diseinuan.

CSS harpidetza kutxa

Harpidetza

a harpidetza kutxa adimenduna Izan ere erabili gradienteak harpidetzeko botoiaren eremuko tonu morea bezalakoa da.

Harpidetza kutxa

Harpidetza kutxa

a harpidetza kutxa sinplea baina diseinuaren eragin handia du.

EMOJI baliozkotzeko inprimakia

EMOJI

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.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Iruzkin bat, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko. Beharrezko eremuak markatuta daude *

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Juan Jose Perez esan zuen

    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.