40 CSS eyðublöð sem ekki geta vantað á neinni vefsíðu

Innskráningarform

Ef það er eitthvað sem er venjulega mjög algengt fyrir hvers konar vefsíður, þá eru þetta eyðublöðin. Eyðublöðin sem við notum til að fylla út tengiliðaupplýsingarnar, sláðu inn bankaupplýsingar, skráðu þig inn á félagsnet eða einfaldlega framkvæma leit eins og þá sem við gerum venjulega daglega í Google leitarvélinni.

Svo í dag ætlum við að sýna þér 40 eyðublöð í CSS allt frá tengiliðayfirliti, greiðslukortakassa, innskráningar, einfalt, áskrift eða jafnvel löggilding. Röð mynda af miklum glæsileika og stíl til að veita þessum sérstaka punkti á vefsíðuna þína, óháð þema.

Lágmarks sambandform

form-lægstur

Einfalt samskiptaform með a mikið úrval af áhrifum svo sem svifamerki eða línufjör. Glæsilegur CSS kóði með smá JavaScript. Ef þú ert að leita að a lægstur sambandform þetta er fullkomið fyrir þig.

Tengd grein:
23 hágæða CSS bókasöfn fyrir vefhönnun

Minimalist form

Minimalisti

Annað lágmarksform, þó aðeins í CSS sé a einfalt og áhrifaríkt form. Það er ekki með naumhyggju fjör frá því fyrra, en það uppfyllir markmið sitt mjög vel.

Vintage samband form

Vintage

Vintage samband form, mjög glæsileg hönnun. Móttækilegur fyrir þessar vefsíður að sjást úr farsíma, þó að það feli ekki í sér löggildingu.

Tengiliðabréf bréfs

Letter

þetta snerting mynd það hefur frekar forvitnilegt fjör: stafur myndast. Einfalt, en mjög gagnlegt með miklum lit.

Tengd grein:
27 ókeypis HTML og CSS kort fyrir blogg, rafræn viðskipti og fleira

Stækkað tengiliðareyðublað

Víðtæk tengilið

þetta stækkað tengiliðareyðublað Það er aðeins framhlið og hefur löggilding með jQuery. Við smellum á fljótandi hnappinn og eyðublaðið birtist með lifandi fjör. Framúrskarandi.

Tengilið HÍ samband

Tengiliðsform

Tengilið HÍ samband það er eyðublað gert í HTML og CSS. Það stendur upp úr fyrir að vera einfalt sambandskort að við getum fyllt þannig að aðeins textareiturinn breytist þegar smellt er á hann.

Greiðslukortagreiðsla

Greiðslukort greiðslu

Un greiðslukortakassa gert í HTML, CSS og JavaScript sem er aðgreind með því að snúa hreyfimyndum kreditkortið þegar við ýtum á CVC eða öryggisnúmer reitinn.

Kreditkort íbúð hönnun

Hreint CSS kreditkort

Hreint CSS fyrir a kassa fyrir kreditkort í flötum litum. Litrík og mjög einföld sem er fær um að tákna gæði og fagmennsku.

HÍ við kreditkort

Snarlbúnaður

Annað kreditkort í HTML, CSS og JavaScript sem stendur upp úr hversu gott það er valið heildarhönnunina. Við gleymdum hreyfimyndum í þessu kóða fyrir vefsíðuna þína. Sæktu það á þennan hlekk.

React Checkout

Bregðast

React Checkout, búin til með React.js, er aðgreind með hliðarmyndin sem við getum sérsniðið með þjónustu eða vörum sem við seljum í rafrænum viðskiptum okkar.

Greiðslukort greiðslu

Popov

Þessi afgreiðsla stendur upp úr fyrir möguleikann á að setja mynd á kortið. A einfalt og skýrt form gert með CSS3, HTML5 og smá jQuery. Hágæða og frábrugðin öðrum afgreiðslukössum á þessum lista. Þú getur hlaðið niður hér þessa greiðslukortakassa.

Greiðslukortagreiðsla

Rönd

þetta greiðslukort greiðslukorta er forritað til að æfa sig með JavaScript fyrir DOM meðferð. Þú getur munað í hönnuninni glæsilegan kóða Stripe, stafrænu bankaþjónustunnar sem er að nálgast PayPal.

Kreditkort

Daily

Glæsilegur afgreiðslu fyrir kortagreiðslu frábrugðin hinum og byggt á kreditkort staðsett efst Svo að hér að neðan höfum við allt eyðublaðið með mismunandi gögnum sem viðskiptavinurinn þarf að fylla út til að greiða í netversluninni.

Skref fyrir skref form

Skref fyrir skref

Un skref fyrir skref form til skráningar í HTML, CSS og JavaScript. Fjögur skref fyrir hvert stig staðsett vinstra megin. Vel lokið fjör fyrir mjög fullunnið form. Mjög mælt með því.

Gagnvirkt form

Gagnvirk

Un gagnvirkt form fjölþrepa gerður með HTML, CSS og JavaScript. Það stendur upp úr fyrir umbreytingar fjör milli hvers skrefa. Það hefur glæsilegan blæ sem mun ekki fara framhjá neinum.

Skref fyrir skref form

Skref fyrir skref

þetta skref fyrir skref form stendur upp úr fyrir að vera ansi skapandi. Þú munt svara spurningunum svo að þú getir snúið aftur til þeirra hvenær sem er með því að vera sjónrænt til staðar á skjánum allan tímann.

Skref fyrir skref

Paso

Skref fyrir skref form gert í HTML, CSS og JavaScript. Það einkennist af umbreytingarfjörunum á milli skrefanna.

Fjölþrepa Jquery form

JQuery fjölþrep

Ef þú ert með mjög langt form, Þetta er fullkomið fyrir mismunandi hluta með mjög sláandi framfarastiku. Byggt á jQuery og CSS stendur það upp úr fyrir hönnun sína og fyrir frábæran glæsileika.

Hönnunarform HÍ

Hreyfimyndaform

Umskipti þessa Hönnunarform HÍ þeir eru byggt á Domink Marskusic. Athygli á sköpunaráhrifum bláa reitsins þegar við smellum á suma af tveimur innskráningar- eða lotusviðum.

Reikningssköpun / innskráningarform

Skráning innskráningar

Brella innskráning og stofnun reiknings sem er byggð á fjörum hvað gerist á milli þessara tveggja hluta. Mjög núverandi og sláandi viðvera sem á að gera í HTML, JavaScript og CSS.

Snake Highlight

Snake

Snake Highlight er ein sláandi innskráning allra lista sem stendur upp úr fyrir glæsileg fjör það kemur fljótt upp þegar við smellum á annað sviðið.

Innskráningarskjár

Skrá inn

Divine þessa hönnun innskráningarskjá svo eru þeir líka fjör og hversu skapandi það er. Ef þú vilt vera nýjastur þegar kemur að vefhönnun getur þetta eyðublað ekki vantað. Ómissandi.

Hönnun innskráningar HÍ

Innskráningarform

Hannað með HTML, Sass og jQuery. Hönnun innskráningar HÍ es elegant og skýrt um efnið sem ekki skortir lúmskt fjör til að verða annað af eftirlæti listans.

Innskráning og stofnun reiknings HÍ

Innskráning skráningar

Sérstakur innskráningarhönnun og stofnun reiknings HÍ  fyrir litina og fyrir kynningu í eitt stórt kort tvo kafla. Önnur sú fallegasta í framkvæmdinni sem við getum ekki saknað. Búið til í HTML, CSS og JavaScript.

Ógeðslegar villur

Ógeðfelldur

Ógeðslegar villur Það er frábær innskráning vegna fjörsins í reiti með viðbjóðslegum.css. Upprunalega til að vera skemmtileg, áhyggjulaus og mjög mismunandi innskráning. Original án nokkurs vafa fyrir vefsíðu okkar.

Skráðu þig inn CSS HTML

CSS

Forvitnilegt innskráning eftir mismunandi táknum sem sýna hverja reitinn að taka gestinn hvert sem við viljum. Litbrigðin sem valin voru í litunum standa einnig upp úr. Það er ekki með nein fjör. Það er gert í HTML og CSS til að útfæra það á vefsíðunni fyrir viðskiptavin eða okkar eigin.

Form fyrir innskráningarform

Modal

þetta Formal innskráningarform er innblásin af tungumáli hönnun þekkt fyrir Material Design. Við höfum séð það í fjölda forrita á farsímum. Í þessum kóða erum við með innskráningarborð og skráningarborð sem er sjálfgefið falið. Hægt er að virkja skráningarborðið með því að smella á bláa dálkinn sem er til hægri. Það hefur frábært fjör að vera mjög sérstök og sláandi innskráning.

Myndaðu flexbox

Flexbox

Við byrjum leitareyðublöðin með þessu form byggt á flexbox. Það stendur upp úr fyrir rauða litinn á „leitinni“ og fyrir lítið meira fyrir glæsilegan leitarreit fyrir vefsíðuna þína.

Hreyfikassi

Hreyfikassi

Með þessu líflegur kassi smelltu á stækkunarglerstáknið og skærblátt fjör birtist svo að við verðum aðeins að slá leitina sem við ætlum að framkvæma á vefsíðunni. Búið til með HTML, CSS og JavaScript.

Leitarsvið

Ýta leit

a stór lína liggur yfir skjáinn þannig að þegar við ýtum á það byrjum við að slá leitina. Pickup hnappur til að skilgreina þetta einfalt leitarform.

Einfaldur leitarreitur smellir á

Waze

Einfaldur leitarreitur smellir á er byggt á víxlverkun sem sést í Waze Driver Community appið ökutæki. Öll tákn og myndir eru gerðar með CSS. Það stendur upp úr fyrir þessi tákn sem gera okkur kleift að framkvæma sérstakar leitir að vöru eða þjónustu. Sláandi vegna þess hve flott það er.

CSS inntaksáhrif

CSS inntak

CSS inntaksáhrif inniheldur röð af hreyfimyndir í texta og leitarskúffu að vera varkár leitandi í formi.

Leitun á öllum skjánum

Leitun á öllum skjánum

Þessi færsla frá leit í fullri skjá það virkar með hvers konar útlit eða staðsetningu. Krefst stíls gámasértækur og leitarþekja þáttur að vera staðsettur í rótinni. Það einkennist af skoppandi hreyfimynd um leið og við ýtum á leitarhnappinn.

Leita

Leita

Un leitarform einfalt það honum finnst gaman að leika með mismunandi stöður og fjör. Við smellum á leitarhnappinn og skúffan í heild birtist til að slá inn orðin. Mjög núverandi og mjög mælt með því hversu einfalt það er.

Engar spurningar

Engar spurningar

Engin spurning es einfalt form með textareit og möguleika á að velja svör fyrir notandann til að velja þau. Mikið sjónrænt að vera einn sá besti.

Popup áskriftareyðublað

Gerast áskrifandi

Með þessu sprettiglugga fyrir áskrift, við smellum á fljótandi hnappinn og það tekur okkur að form með mjög skemmtilegum tón og reit þar sem á að slá inn tölvupóstinn. Perfect fyrir markaðssetningu tölvupósts.

HÍ áskriftarreits

Áskrift

a áskriftarkassi með viðvörunarbjöllu og lítið annað en flata liti Í hönnuninni.

CSS áskriftarkassi

Áskrift

a snjall áskriftarkassi fyrir þá staðreynd að notaðu halla fyrir áskriftarhnappinn alveg eins og fjólublái liturinn á reitnum.

Áskriftarkassi

Áskriftarkassi

a einfaldur áskriftarkassi en með mikil áhrif af hönnun.

Staðfestingarform EMOJI

EMOJI

Í hreinu CSS þetta staðfestingarform að búa til lykilinn eða lykilorð. Þegar við skrifum mun emoji mæla öryggisstig eyðublaðsins. Fyndið og forvitið án efa.

Ekki missa af þessu listi yfir 23 líflegur örvar í CSS.


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

Athugasemd, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Juan Jose Perez sagði

    Frábært sýnishorn af dæmum sem hér eru kynnt. Fjölbreytni og aðlögun að mismunandi samhengi og það besta er að hlekkur hvers titils inniheldur kynningu og frumkóðann, þó að þú ættir að auðkenna það með hnappnum «Sjá kynningu» vegna þess að það var af forvitni að ég uppgötvaði það í titill. Takk fyrir framlagið. Kveðja frá Caracas.