40 CSS formų, kurių negalima praleisti jokioje svetainėje

Prisijungimo forma

Jei yra kažkas, kas paprastai yra labai įprasta bet kokio tipo svetainei, tai yra šios formos. Formos, kurias naudojame kontaktinei informacijai užpildyti, įveskite banko duomenis, prisijunkite prie socialinio tinklo arba tiesiog atlikite paiešką, tokią, kokią paprastai darome kasdien „Google“ paieškos sistemoje.

Taigi šiandien mes jums parodysime 40 formų CSS pradedant kontaktinėmis formomis, atsiskaitymais kreditinėmis kortelėmis, prisijungimais, paprastais, prenumeratos ar net patvirtinimu. Puikios elegancijos ir stiliaus formų serija, suteikianti tą ypatingą tašką jūsų svetainei, neatsižvelgiant į temą.

Minimalistinė kontaktinė forma

forma-minimalistinė

Paprasta susisiekimo forma su a labai įvairūs efektai pavyzdžiui, plūduriuojantys ženklai ar linijų animacijos. Elegantiškas CSS kodas su šiek tiek „JavaScript“. Jei ieškote a minimalistinė kontaktinė forma tai puikiai tinka jums.

Susijęs straipsnis:
23 aukštos kokybės CSS bibliotekos, skirtos interneto dizainui

Minimalistinė forma

Minimalistinis

Kitas minimali forma, nors tik CSS būti a paprasta ir didelio efekto forma. Jame nėra minimalistinių animacijų, panašių į ankstesnį, tačiau jis labai gerai įgyvendina savo tikslą.

Derliaus kontaktinė forma

senoviškas

Derliaus kontaktinė forma, labai elegantiškas dizainas. Reaguoja į tas svetaines kad būtų galima pamatyti iš mobiliojo ryšio, nors jis neapima patvirtinimo.

Laiško kontaktinė forma

Laiškas

tai kontaktinę formą ji turi gana įdomią animaciją: suformuojamas laiškas. Paprasta, bet labai naudinga su daugybe spalvų.

Susijęs straipsnis:
27 nemokamos HTML ir CSS kortelės tinklaraščiams, el. Prekybai ir dar daugiau

Išplėstinė kontakto forma

Plati kontaktų forma

tai kontakto forma išplėsta Tai tik priekinė dalis ir turi patvirtinimas naudojant „jQuery“. Spustelėkite plūduriuojantį mygtuką ir forma pasirodys su gyva animacija. Išskirtinis.

Susisiekimo formos vartotojo sąsaja

Kontaktinė forma

Susisiekimo formos vartotojo sąsaja tai forma, sukurta HTML ir CSS. Jis išsiskiria tuo, kad yra paprasta kontaktinė kortelė kad mes galime užpildyti, kad spustelėjus pasikeistų tik teksto laukas.

Mokėjimo kortelė

„Checkout“ mokėjimo kortelė

Un atsiskaitymas mokėjimo kortele Pagaminta HTML, CSS ir „JavaScript“ išsiskiria besisukančia animacija kredito kortelę, kai paspaudžiame CVC arba apsaugos numerio lauką.

Kreditinės kortelės plokščias dizainas

Gryna CSS kreditinė kortelė

Grynas CSS a kasos plokščių spalvų kreditinės kortelės. Spalvinga ir labai paprasta, galinti žymėti kokybę ir profesionalumą.

Kreditinės kortelės vartotojo sąsaja

Užkandžiai

Kita kredito, HTML, CSS ir „JavaScript“ kortelė, išsiskirianti tuo, kad ji yra gera pasirinko bendrą dizainą. Pamiršome animacijas šiame jūsų svetainės kodo fragmente. Atsisiųskite šią nuorodą.

Reaguoti į kasą

Reaguoti

Reaguoti į kasą, pagamintas naudojant „React.js“, išsiskiria šoninį paveikslėlį, kurį galime pritaikyti su paslaugomis ar produktais, kuriuos parduodame savo el. prekyboje.

„Checkout“ mokėjimo kortelė

Popovas

Ši kasa išsiskiria galimybe įdėti atvaizdą į kortelę. A paprasta ir aiški forma, sukurta naudojant CSS3, HTML5 ir šiek tiek „jQuery“. Aukštos kokybės ir skiriasi nuo likusių kasų šiame sąraše. Galite atsisiųsti čia šią mokėjimo kortelę.

Mokėjimas kreditine kortele

Juostelių

tai atsiskaitymo kreditine kortele forma yra užprogramuota praktikuotis su „DOM“ manipuliavimo „JavaScript“. Dizaine galite prisiminti elegantišką skaitmeninės bankininkystės paslaugos „Stripe“ kodą, kuris artėja prie „PayPal“.

Kreditinė kortelė

Kasdien

Elegantiška atsiskaitymas mokant kortele skiriasi nuo kitų ir remiasi viršuje esančią kredito kortelę kad žemiau būtų visa forma su skirtingais duomenimis, kuriuos klientas turi užpildyti norėdamas atlikti mokėjimą el. prekyboje.

Žingsnis po žingsnio forma

Žingsnis po žingsnio

Un žingsnis po žingsnio forma registracijai atlikti HTML, CSS ir „JavaScript“. Keturi žingsniai kiekvienam iš taškų esančią kairėje pusėje. Puikiai užbaigtos animacijos puikiai užbaigtai formai. Labai rekomenduojama.

Interaktyvi forma

Interaktyvus

Un interaktyvi forma daugkartinis leidimas su HTML, CSS ir „JavaScript“. Jis išsiskiria perėjimo animacija tarp kiekvieno žingsnio. Jis turi elegantišką prisilietimą, kuris neliks nepastebėtas.

Žingsnis po žingsnio forma

Žingsnis po žingsnio

tai žingsnis po žingsnio forma išsiskiria tuo, kad yra gana kūrybingas. Jūs atsakysite į klausimus kad galėtumėte bet kada grįžti prie jų, visą laiką būdami vizualiai ekrane.

Žingsnis po žingsnio

Pasas

Žingsnis po žingsnio forma padaryta HTML, CSS ir „JavaScript“. Jam būdinga perėjimo animacija tarp kiekvieno žingsnio.

Daugiapakopė „Jquery“ forma

„JQuery“ daugiapakopis

Jei turite labai ilga forma, tai puikiai tinka skirtingoms sekcijoms su labai ryškia progreso juosta. Remiantis „jQuery“ ir CSS, jis išsiskiria savo dizainu ir puikia elegancija.

Vartotojo sąsajos animacijos forma

Animacijos forma

To perėjimai Vartotojo sąsajos animacijos forma jie yra remiantis Dominku Marskusiciu. Dėmesio į mėlynojo langelio kūrybinį efektą, kai spustelėsime kai kuriuos iš dviejų prisijungimo laukų.

Paskyros sukūrimo / prisijungimo forma

Prisijungimo kūrimas

Triukas prisijungimas ir paskyros sukūrimas kuri paremta animacija kas vyksta tarp tų dviejų skyrių. Labai dabartinis ir įspūdingas HTML, „JavaScript“ ir CSS buvimas.

Gyvatės paryškinimas

Gyvatė

Gyvatės paryškinimas yra vienas ryškiausių prisijungimų prie visų sąrašų išsiskiria elegantiška animacija tai greitai atsiranda tuo momentu, kai spustelėjame vieną iš dviejų laukų.

Prisijungimo ekranas

Prisijungti

Dieviškas šis dizainas prisijungimo ekranas taip pat ir jų animacijos ir kaip tai kūrybinga. Jei norite būti naujausias, kai kalbate apie interneto dizainą, šios formos negalima praleisti. Būtinas.

Prisijungimo sąsajos dizainas

Prisijungimo forma

Sukurta naudojant HTML, „Sass“ ir „jQuery“. Prisijungimo sąsajos dizainas es elegantas ir aiškus tema, kurioje netrūksta subtilių animacijų, kad taptų dar vienu iš mėgstamiausių sąraše.

Prisijungimas ir vartotojo sąsajos sukūrimas

Prisijungimas registracija

Specialus prisijungimo dizainas ir paskyros kūrimo vartotojo sąsaja  spalvoms ir pateikimui viena didelė kortelė - dvi dalys. Dar viena gražiausių egzekucijos, kurios negalime praleisti. Pagaminta HTML, CSS ir „JavaScript“.

Nemalonios klaidos

Kenkia

Nemalonios klaidos Tai puikus prisijungimas dėl laukai su nemaloniais.css. Originalus, kad būtų įdomus, nerūpestingas ir labai skirtingas prisijungimas. Originalus be jokių abejonių mūsų svetainei.

Prisijunkite prie CSS HTML

CSS

Smalsus prisijungimas skirtingomis piktogramomis rodantys, kad kiekvienas laukas nuveš lankytoją kur tik norime. Taip pat išsiskiria spalvomis pasirinkti atspalviai. Jame nėra animacijos. Jis sukurtas HTML ir CSS, kad jis būtų įdiegtas kliento ar mūsų pačių svetainėje.

Modalinė prisijungimo forma

Modalas

tai Modalinė prisijungimo forma yra įkvėpta lietuvių kalbos dizainas žinomas dėl medžiagų dizaino. Tai matėme daugelyje programų mobiliuosiuose įrenginiuose. Šiame kode turime prisijungimo skydą ir registracijos skydelį, kuris pagal numatytuosius nustatymus yra paslėptas. Registracijos skydelį galima suaktyvinti spustelėjus mėlyną stulpelį dešinėje pusėje. Ji turi puikią animaciją, kad būtų labai ypatingas ir ryškus prisijungimas.

Forma „flexbox“

„Flexbox“

Paieškos formas pradedame tuo forma remiantis „flexbox“. Jis išsiskiria raudona „paieškos“ spalva ir šiek tiek daugiau - elegantišku jūsų svetainės paieškos lauku.

Animuota dėžutė

Animuota dėžutė

Su tuo animacinė dėžutė spustelėkite didinamojo stiklo piktogramą ir pasirodys ryškiai mėlyna animacija kad mums tereikėtų įvesti paiešką, kurią atliksime svetainėje. Pagaminta naudojant HTML, CSS ir „JavaScript“.

Paieškos laukas

Spustelėkite paiešką

A didelė linija eina per ekraną kad jį paspaudę pradėtume rašyti paiešką. Tai apibūdinantis mygtukas paprasta paieškos forma.

Spustelėkite paprastą paieškos lauką

Waze

Spustelėkite paprastą paieškos lauką remiasi sąveika, matyta „Waze“ vairuotojų bendruomenės programa transporto priemonė. Visos piktogramos ir vaizdai daromi naudojant CSS. Jis išsiskiria tomis piktogramomis, kurios leidžia mums atlikti konkrečias produkto ar paslaugos paieškas. Stebina dėl to, kaip šaunu.

CSS teksto įvesties efektas

CSS įvestis

CSS teksto įvesties efektas apima seriją animacijos tekste ir paieškos stalčiuje būti atidus formos ieškotojas.

Paieška visame ekrane

Paieška visame ekrane

Šis įrašas iš paieška visame ekrane jis veikia su bet kokio tipo išdėstymu ar padėtimi. Reikalingi stiliai konkretaus konteinerio ir paieškos perdangos elementas būti šaknyje. Jai būdinga šokinėjanti animacija tuo momentu, kai paspaudžiame paieškos mygtuką.

Paieška

Paieška

Un paieškos forma tai paprasta jis mėgsta žaisti su skirtingomis pozicijomis ir animacijos. Spustelėkite paieškos mygtuką ir pasirodys visas stalčius, kuriame bus įvesti žodžiai. Labai aktuali ir labai rekomenduojama, kaip paprasta.

Jokių klausimų

Jokių klausimų

Jokio klausimo es paprasta forma su teksto lauku ir galimybė pasirinkti keletą atsakymų, kuriuos vartotojas gali pasirinkti. Puikiai vizualiai, kad būtų vienas geriausių.

Iššokanti prenumeratos forma

prenumeruoti

Su šiuo iššokanti prenumeratos forma, mes spustelėsime plūduriuojantį mygtuką ir jis mus nuveš labai juokingo tono forma ir lauką, kur įvesti el. pašto adresą. Puikiai tinka el. Pašto rinkodarai.

Prenumeratos laukelio vartotojo sąsaja

Prenumerata

A prenumeratos langelis su pavojaus varpu ir šiek tiek daugiau nei plokščios spalvos Projekte.

CSS prenumeratos laukelis

Prenumerata

A išmanioji prenumeratos dėžutė už faktą naudoti gradientus mygtukui „užsiprenumeruoti“ kaip purpurinis lauko atspalvis.

Prenumeratos laukelis

Prenumeratos laukelis

A paprasta prenumeratos dėžutė bet pagal dizainą turi didelį poveikį.

EMOJI patvirtinimo forma

EMOJI

Grynai CSS tai patvirtinimo forma sukurti raktą arba slaptažodį. Kaip mes rašome, jaustukas išmatuos formos saugumo lygį. Juokinga ir smalsu be jokios abejonės.

Nepraleiskite to sąrašas 23 animacinių rodyklių CSS.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Komentaras, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Juanas Chosė Perezas sakė

    Puikus čia pateiktų pavyzdžių pavyzdys. Įvairovė ir pritaikymas skirtingiems kontekstams, o geriausias dalykas yra tai, kad kiekvieno pavadinimo nuorodoje yra demonstracinė versija ir šaltinio kodas, nors turėtumėte tai pabrėžti mygtuku „Žiūrėti demonstraciją“, nes iš smalsumo atradau jį pavadinime . Ačiū už indėlį. Sveikinimai iš Karakaso.