40 CSS-vormi, mida ei saa ühelgi veebisaidil puududa

Sisselogimisvorm

Kui on midagi, mis on tavaliselt igat tüüpi veebisaitide jaoks väga levinud, on need vormid. Vormid, mida kasutame kontaktandmete täitmiseks, sisestage pangaandmed, logige suhtlusvõrku sisse või tehke lihtsalt otsing, nagu tavaliselt Google'i otsingumootoris igapäevaselt.

Nii et täna näitame teile 40 vormi CSS-is alates kontaktivormidest, krediitkaardikassadest, sisselogimistest, lihtsatest, tellimustest või isegi valideerimisest. Suurepärase elegantsi ja stiiliga vormide seeria, et anda oma veebisaidile see eriline punkt, sõltumata teemast.

Minimalistlik kontaktivorm

vorm-minimalistlik

Lihtne kontaktvorm a-ga väga erinevaid efekte näiteks ujuvad märgid või jooneanimatsioonid. Elegantne CSS-kood koos natuke JavaScripti. Kui otsite a minimalistlik kontaktvorm see sobib teile ideaalselt.

Seotud artikkel:
23 kvaliteetset CSS-i teeki veebidisainiks

Minimalistlik vorm

Minimalistlik

Muu minimaalne vorm, kuigi ainult CSS-is olla lihtne ja suure mõjuga vorm. Sellel ei ole eelmise minimalistlikke animatsioone, kuid see täidab oma eesmärki väga hästi.

Vintage kontaktvorm

aastakäik

Vintage kontaktvorm, väga elegantne disain. Tundlik nende veebisaitide jaoks mobiililt nähtav, kuigi see ei sisalda valideerimist.

Kirja kontakti vorm

Kiri

see kontakt vormi sellel on üsna uudishimulik animatsioon: moodustub kiri. Lihtne, kuid rohke värviga väga kasulik.

Seotud artikkel:
27 tasuta HTML- ja CSS-kaarti ajaveebide, e-kaubanduse ja muu jaoks

Laiendatud kontaktivorm

Lai kontaktivorm

see laiendatud kontaktivorm See on ainult esiosa ja sellel on valideerimine jQuery abil. Klõpsame hõljuval nupul ja vorm ilmub koos elava animatsiooniga. Väljapaistev.

Kontaktivormi kasutajaliides

Kontaktivorm

Kontaktivormi kasutajaliides see on vorm, mis on tehtud HTML-is ja CSS-is. See paistab silma olemise poolest lihtne kontaktkaart mida saame täita nii, et sellel klõpsamisel muutub ainult tekstiväli.

Maksekaardi kassas

Checkouti kaardimakse

Un maksekaardi kassas tehtud HTML, CSS ja JavaScript mis eristab pöörlev animatsioon krediitkaardi vajutame hetkel väljale CVC või turvanumber.

Krediitkaardi tasane kujundus

Puhas CSS-krediitkaart

Puhas CSS a kassasse lamedates toonides krediitkaardid. Värvikad ja väga lihtsad, mis on võimelised tähistama kvaliteeti ja professionaalsust.

Krediitkaardi kasutajaliides

Suupisted

Teine HTML-, CSS- ja JavaScripti krediitkaart, mis paistab silma selle hea kvaliteediga valis üldise kujunduse. Unustasime selles veebisaidi koodijupis olevad animatsioonid. Laadige see sellelt lingilt alla.

Reageeri kassasse

Reageerima

Reageeri kassasse, mis on tehtud veebisaidiga React.js, eristub külgpilt, mida saame kohandada teenuste või toodetega, mida me oma e-kaubanduses müüme.

Checkouti maksekaart

Popov

See kassas paistab silma võimalus kaardile pilt panna. A lihtne ja selge vorm, mis on tehtud CSS3, HTML5 abil ja natuke jQueryd. Kvaliteetne ja erinev selles nimekirjas olevatest kassadest. Saate alla laadida siin see maksekaardi kassas.

Krediitkaardimakse

Stripe

see krediitkaardimakse vorm on programmeeritud harjutama JavaScripti DOM-i manipuleerimiseks. Kujunduses saate meenutada PayPalile lähemale jõudva digitaalse pangateenuse Stripe elegantset koodi.

Krediitkaart

Iga päev

Elegantne kassas kaardimakse teistest erinev ja põhineb krediitkaart, mis asub ülaosas Nii et allpool on kogu vorm koos erinevate andmetega, mis klient peab e-kaubanduses makse sooritamiseks täitma.

Samm-sammult vorm

Samm-sammult

Un samm-sammult vorm registreerimiseks HTML, CSS ja JavaScript. Neli sammu iga punkti jaoks asub vasakul küljel. Hästi viimistletud vormi jaoks hästi viimistletud animatsioonid. Väga soovitatav

Interaktiivne vorm

Interaktiivne

Un interaktiivne vorm HTML-i, CSS-i ja JavaScripti abil tehtud mitmeastmeline. See paistab silma sammude vahelise ülemineku animatsiooni poolest. Sellel on elegantne puudutus, mis ei jää märkamata.

Samm-sammult vorm

Samm-sammult

see samm-sammult vorm paistab silma üsna loova olemisega. Vastate küsimustele et saaksite nende juurde igal ajal tagasi pöörduda, olles kogu aeg ekraanil visuaalselt kohal.

Samm-sammult

Paso

Samm-sammult vorm valmis HTML-is, CSS-is ja JavaScriptis. Seda iseloomustab ülemineku animatsioon iga sammu vahel.

Mitmeastmeline Jquery vorm

JQuery mitmeastmeline

Kui sul on väga pikk vorm, see sobib suurepäraselt väga silmapaistva edenemisribaga erinevate sektsioonide jaoks. JQuery ja CSS-i põhjal paistab see silma oma disaini ja suurepärase elegantsi poolest.

Kasutajaliidese animatsioonivorm

Animatsiooni vorm

Selle üleminekud vormi kasutajaliidese animatsioon nad on põhineb Domink Marskusicil. Tähelepanu sinise kasti loomingulisele mõjule, kui klõpsame mõnel kahest sisselogimis- või seansi väljast.

Konto loomise / sisselogimise vorm

Sisselogimise loomine

Trikk sisselogimine ja konto loomine mis põhineb animatsioonil mis nende kahe sektsiooni vahel juhtub. HTML-i, JavaScripti ja CSS-i puhul tuleb teha väga praegune ja silmatorkav kohalolek

Madu esiletõstmine

Madu

Madu esiletõstmine on üks kõige silmatorkavam sisselogimine mis tahes loendis paistab silma elegantse animatsiooni poolest see ilmub kiiresti hetkel, kui klõpsame ühel kahest väljast.

Sisselogimisekraan

Logi sisse

Jumalik see kujundus sisselogimisekraan nii on ka nemad animatsioone ja kui loominguline see on. Kui soovite veebikujunduse osas kõige värskem olla, ei saa see vorm puududa. Asendamatu.

Sisselogimise kasutajaliidese kujundus

Sisselogimisvorm

Kujundatud HTML, Sass ja jQuery abil. Sisselogimise kasutajaliidese kujundus es elegantne ja selge teemal, millel ei puudu peened animatsioonid, et saada loendis veel üheks lemmikuks.

Sisselogimise ja kasutajaliidese konto loomine

Sisselogimise registreerimine

Eriline sisselogimise kujundus ja konto loomise kasutajaliides  värvide ja esitusviiside jaoks üks suur kaart kaks sektsiooni. Veel üks kaunimaid hukkamises, millest me mööda ei pääse. Valmistatud HTML-is, CSS-is ja JavaScriptis.

Ebameeldivad vead

Ebameeldiv

Ebameeldivad vead See on suurepärane sisselogimine väljad ebameeldiva.css-ga. Originaal on lõbus, muretu ja väga erinev sisselogimine. Originaal ilma igasuguse kahtluseta meie veebisaidi jaoks.

Logi sisse CSS HTML

CSS

Uudishimulik sisselogimine erinevate ikoonide abil mis näitavad, et kõik väljad viivad külastaja sinna, kuhu tahame. Samuti paistavad silma värvides valitud toonid. Sellel pole animatsiooni. See on tehtud HTML-is ja CSS-is, et seda kliendi või meie enda veebisaidil rakendada.

Modaalne sisselogimisvorm

Moodul

see Modaalne sisselogimisvorm on inspireeritud eesti keelest materjalidisaini poolest tuntud disain. Oleme seda näinud paljudes mobiilseadmete rakendustes. Selles koodis on meil sisselogimispaneel ja registreerimispaneel, mis on vaikimisi peidetud. Registreerimispaneeli saab aktiveerida, klõpsates paremal küljel oleval sinisel veerul. Sellel on suurepärane animatsioon olla väga eriline ja silmatorkav sisselogimine.

Vormi flexbox

Flexbox

Sellega alustame otsinguvorme vorm põhineb flexboxil. See paistab silma otsingu punase värvi ja vähe rohkem oma veebisaidi elegantse otsinguvälja jaoks.

Animeeritud kast

Animeeritud kast

Sellega animeeritud kast klõpsake suurendusklaasi ikooni ja ilmub erksinine animatsioon nii et peame sisestama ainult selle veebisaidil toimuva otsingu. Valmistatud HTML-i, CSS-i ja JavaScripti abil.

Otsinguväli

Lükake otsingut

A. suur joon jookseb üle ekraani nii et kui me seda vajutame, hakkame otsingut tippima. Selle määratlemiseks nupp lihtne otsinguvorm.

Klõpsake lihtsal otsinguväljal

Waze'is

Klõpsake lihtsal otsinguväljal põhineb aastal vaadeldud suhtlusel Waze'i juhtide kogukonna rakendus sõiduk. Kõik ikoonid ja pildid on tehtud CSS-iga. See paistab silma nende ikoonide poolest, mis võimaldavad meil konkreetset toodet või teenust otsida. Silmatorkav, kui lahe see on.

CSS-i tekstisisestusefekt

CSS-i sisend

CSS-i tekstisisestusefekt sisaldab rida animatsioonid tekstis ja otsingu sahtlis olla vormis ettevaatlik otsija.

Täisekraanil otsing

Täisekraanil otsing

See kanne kasutajalt täisekraanil otsing see töötab mis tahes tüüpi paigutuse või asukohaga. Nõuab stiile konteinerispetsiifiline ja otsingu ülekatte element asuma juur. Seda iseloomustab kopsakas animatsioon hetkel, kui vajutame otsingunuppu.

Otsing

Otsing

Un otsinguvorm see on lihtne talle meeldib mängida erinevate positsioonidega ja animatsioone. Klõpsame otsingu nupul ja sõnade sisestamiseks ilmub täielik sahtel. Väga ajakohane ja soovitatav, kui lihtne see on.

Küsimusi pole

Küsimusi pole

Pole küsimust es lihtne vorm tekstiväljaga ja võimalus valida mõned vastused kasutajale nende valimiseks. Visuaalselt palju, et olla üks parimatest.

Hüpikakna tellimise vorm

Soovin uudiskirja

Selle hüpikakna tellimise vorm, klõpsame ujuvnuppu ja see viib meid väga naljaka tooniga vorm ja väli, kuhu sisestada e-posti aadress. Ideaalne e-posti turundamiseks.

Tellimiskasti kasutajaliides

Tellimus

A. tellimiskast häirekellaga ja natuke rohkem kui lamedad värvid Kujunduses.

CSS-i tellimiskast

Tellimus

A. nutikas tellimiskast fakti eest kasutage gradiente tellimisnupu jaoks täpselt nagu välja lilla toon.

Tellimiskast

Tellimiskast

A. lihtne tellimiskast kuid kujunduslikult suur mõju.

EMOJI valideerimisvorm

EMOJI

Puhtas CSS see valideerimisvorm võtme loomiseks või parool. Nagu me kirjutame, mõõdab emotikon vormi turbetaset. Naljakas ja uudishimulik kahtlemata.

Ära jäta seda ilma CSS-i 23 animeeritud noole loend.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Kommentaar, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Juan Jose Perez DIJO

    Suurepärane näidis näidetest siin. Mitmekesisus ja kohanemine erinevate kontekstidega ning parim on see, et iga pealkirja link sisaldab demot ja lähtekoodi, kuigi peaksite selle esile tõstma nupuga «Vaata demot», sest avastasin selle uudishimust pealkirjas . Täname panuse eest. Tervitused Caracasest.