40 CSS-vorms wat op geen webwerf ontbreek nie

Aanmeldingsvorm

As daar iets is wat gewoonlik baie algemeen is vir enige soort webwerf, is dit die vorms. Die vorms wat ons gebruik om die kontakinligting in te vul, bankbesonderhede in te voer, aan te meld by 'n sosiale netwerk of doen eenvoudig 'n soektog soos ons gewoonlik daagliks in die Google-soekenjin doen.

So vandag gaan ons jou wys 40 vorms in CSS wat wissel van kontakvorms, kredietkaartafrekenings, aanmeldings, eenvoudige, intekening of selfs validering. 'N Reeks vorms van elegansie en styl wat u spesiale punt aan u webwerf gee, ongeag die tema.

Minimalistiese kontakvorm

vorm-minimalisties

'N Eenvoudige kontakvorm met 'n groot verskeidenheid effekte soos drywende merke of lynanimasies. Elegante CSS-kode met 'n bietjie JavaScript. As u op soek is na 'n minimalistiese kontakvorm dit is perfek vir jou.

Verwante artikel:
23 CSS-biblioteke van hoë gehalte vir webontwerp

Minimalistiese vorm

minimalistiese

Ander minimale vorm, hoewel slegs in CSS 'n eenvoudige en hoë effek vorm. Dit het nie die minimalistiese animasies van die vorige nie, maar dit kan baie goed bereik word.

Vintage kontakvorm

Vintage

Vintage kontakvorm, 'n baie elegante ontwerp. Reageer op daardie webwerwe vanaf mobiel gesien te word, hoewel dit nie geldigheid insluit nie.

Kontakvorm vir brief

brief

hierdie Kontak Vorm dit het 'n taamlike nuuskierige animasie: 'n brief word gevorm. Eenvoudig, maar baie nuttig met baie kleur.

Verwante artikel:
27 gratis HTML- en CSS-kaarte vir blogs, e-handel en meer

Uitgebreide kontakvorm

Uitgebreide kontakvorm

hierdie uitgebreide kontakvorm Dit is slegs voorkant en het die validering met jQuery. Ons klik op die drywende knoppie en die vorm verskyn met 'n lewendige animasie. Uitstaande.

Kontakvorm UI

Kontak Vorm

Kontakvorm UI dit is 'n vorm wat in HTML en CSS gemaak is. Dit staan ​​uit om te wees 'n eenvoudige kontakkaart wat ons kan invul sodat slegs die teksveld verander wanneer daar gekliek word.

Betaalkaart afhandeling

Betaalkaart by die betaalpunt

Un betaalkaart afhandeling gemaak in HTML, CSS en JavaScript wat word onderskei deur roterende animasie die kredietkaart op die oomblik dat ons op die CVC- of sekuriteitsnommerveld druk.

Kredietkaart plat ontwerp

Suiwer CSS kredietkaart

Suiwer CSS vir 'n afhandeling vir kredietkaarte in plat kleure. Kleurvol en baie eenvoudig wat kwaliteit en professionaliteit kan aandui.

UI vir kredietkaart

Lekkergoed

Nog 'n kredietkaart in HTML, CSS en JavaScript wat uitstaan ​​vir hoe goed dit is die algehele ontwerp gekies. Ons het vergeet van animasies in hierdie kode vir u webwerf. Laai dit af op hierdie skakel.

Reageer betaalpunt

reageer

Reageer betaalpunt, gemaak met React.js, word onderskei deur die syprent wat ons kan aanpas met die dienste of produkte wat ons in ons e-handel verkoop.

Betaalkaart by die betaalpunt

Popov

Hierdie betaalpunt val op die moontlikheid om 'n beeld op die kaart te plaas. A eenvoudige en duidelike vorm gemaak met CSS3, HTML5 en 'n bietjie jQuery. Hoë gehalte en anders as die res van die betaalpunte op hierdie lys. U kan dit aflaai hier hierdie betaalkaart afreken.

Kredietkaartbetaling

Streep

hierdie kredietkaartbetalingsvorm is geprogrammeer om mee te oefen JavaScript vir DOM-manipulasie. U kan die elegante kode van Stripe, die digitale bankdiens wat nader aan PayPal kom, in die ontwerp herroep.

Kredietkaart

Daaglikse

'N Elegante betaalpunt vir kaartbetaling anders as die ander en gebaseer op 'n kredietkaart aan die bokant sodat ons hieronder die volledige vorm bevat met die verskillende gegewens wat die kliënt moet invul om die betaling in die e-handel te doen.

Stap vir stap vorm

Paso n PASO

Un stap vir stap vorm vir registrasie in HTML, CSS en JavaScript. Vier stappe vir elk van die punte aan die linkerkant geleë. Goed afgewerkte animasies vir 'n baie afgewerkte vorm. Sterk aanbeveel

Interaktiewe vorm

interaktiewe

Un interaktiewe vorm multi-pass gemaak met HTML, CSS en JavaScript. Dit staan ​​uit vir die oorgangsanimasie tussen elk van die stappe. Dit het 'n elegante aanraking wat nie ongesiens sal bly nie.

Stap vir stap vorm

Paso n PASO

hierdie stap vir stap vorm staan ​​uit omdat hy redelik kreatief is. U sal die vrae beantwoord sodat u te alle tye na hulle kan terugkeer deur die hele tyd visueel op die skerm te wees.

Paso n PASO

Paso

Stap vir stap vorm gedoen in HTML, CSS en JavaScript. Dit word gekenmerk deur die oorgangsanimasie tussen elk van die stappe.

Meervoudige stap Jquery vorm

JQuery multi-stap

As jy 'n baie lang vorm, Dit is ideaal vir verskillende afdelings met 'n baie opvallende vorderingsbalk. Gebaseer op jQuery en CSS, staan ​​dit uit vir sy ontwerp en sy groot elegansie.

UI-animasievorm

Animasievorm

Die oorgange hiervan UI-animasievorm están gebaseer op Domink Marskusic. Let op die kreatiewe effek van die blou blokkie as ons op sommige van die twee aanmeldvelde klik.

Rekeningvorm / aanmeldingsvorm

Aanmeldingskepping

'N foefie aanmelding en rekening skep wat gebaseer is op animasie wat tussen die twee afdelings gebeur. Baie aktuele en opvallende teenwoordigheid moet gedoen word in HTML, JavaScript en CSS.

Slang Hoogtepunt

Slang

Slang Hoogtepunt is een van die opvallendste aanmeldings van enige lys wat staan ​​uit vir die elegante animasie dit verskyn vinnig sodra ons op een van die twee velde klik.

Aanmeldskerm

Teken aan

Goddelike hierdie ontwerp aanmeldskerm so is hulle ook animasies en hoe kreatief dit is. As u die nuutste wil wees wat webontwerp betref, kan hierdie vorm nie gemis word nie. Onmisbaar.

Aanteken-UI-ontwerp

Aanmeldingsvorm

Ontwerp met behulp van HTML, Sass en jQuery. Aanteken-UI-ontwerp es elegant en duidelik oor die onderwerp wat nie subtiele animasies ontbreek nie, om een ​​van die gunstelinge op die lys te word.

Aanmelding en UI-rekening skep

Aanmelding registrasie

'N Spesiale aanmeldingsontwerp en UI-rekening skep  vir die kleure en vir aanbieding in een groot kaart die twee afdelings. Nog een van die mooiste in die uitvoering wat ons nie kan mis nie. Gemaak in HTML, CSS en JavaScript.

Onnodige foute

Afskuwelik

Onnodige foute Dit is 'n uitstekende aanmelding as gevolg van die animasie van velde met onaangenaam.css. Oorspronklik om 'n prettige, sorgvrye en heel ander aanmelding te wees. Oorspronklik sonder enige twyfel vir ons webwerf.

Teken CSS HTML aan

CSS

'N Nuuskierige aanmelding deur die verskillende ikone wat elk van die velde wys om die besoeker te neem waar ons wil. Die skakerings wat in die kleure gekies word, val ook op. Dit het geen animasie nie. Dit word in HTML en CSS gemaak om dit op die webwerf te implementeer vir 'n kliënt of ons eie.

Modale aanmeldingsvorm

Modale

hierdie Modale aanmeldingsvorm is geïnspireer deur die taal van ontwerp bekend vir Materiaalontwerp. Ons het dit in baie toepassings op mobiele toestelle gesien. In hierdie kode het ons 'n aanmeldpaneel en 'n registrasiepaneel wat verstek is. Die registrasiepaneel kan geaktiveer word deur op die blou kolom aan die regterkant te klik. Dit het 'n uitstekende animasie om 'n baie spesiale en opvallende aanmelding te wees.

Vorm flexbox

Flexbox

Ons begin die soekvorms hiermee vorm gebaseer op flexbox. Dit staan ​​uit vir die rooi kleur van die «soektog» en vir bietjie meer vir 'n elegante soekveld vir u webwerf.

Animated box

Animated box

Met hierdie geanimeerde boks klik op die vergrootglas-ikoon en 'n helderblou animasie sal verskyn sodat ons slegs die soektog wat ons gaan uitvoer op die webwerf hoef te tik. Gemaak met HTML, CSS en JavaScript.

Soekveld

Druk soek

'n groot lyn loop oor die skerm sodat wanneer ons daarop druk, ons die soektog begin tik. 'N Pick-up-knoppie om dit te definieer eenvoudige soekvorm.

Eenvoudige soekveld klik op

Waze

Eenvoudige soekveld klik op is gebaseer op 'n interaksie gesien in die Waze Driver Community-app voertuig. Alle ikone en beelde word met CSS gemaak. Dit val op vir die ikone wat ons toelaat om spesifieke soektogte na 'n produk of diens uit te voer. Opvallend vanweë hoe cool dit is.

CSS-teksinvoer-effek

CSS-invoer

CSS-teksinvoer-effek sluit 'n reeks van animasies in teks en soeklaai om 'n versigtige soeker in vorm te wees.

Volledige skerm soek

Volledige skerm soek

Hierdie inskrywing van volskermsoek dit werk met enige tipe uitleg of posisie. Vereis style houerspesifieke en soek-oortrek-element om in die wortel geleë te wees. Dit word gekenmerk deur 'n weerkaatsende animasie sodra ons op die soekknoppie druk.

Soek

Soek

Un soekvorm eenvoudig dat hy speel graag met die verskillende posisies en animasies. Ons klik op die soekknoppie en die volledige laai verskyn om die woorde in te tik. Baie aktueel en sterk aanbeveel vir hoe eenvoudig dit is.

Geen vrae nie

Geen vrae nie

Geen vraag nie es eenvoudige vorm met teksveld en die opsie om antwoorde te kies vir die gebruiker om dit te kies. Baie visueel om een ​​van die beste te wees.

Pop-up inskrywingsvorm

Teken In

Met hierdie pop-up inskrywingsvorm, klik ons ​​op die drywende knoppie en dit sal ons neem vorm met 'n baie snaakse toon en 'n veld waar u die e-pos moet invoer. Ideaal vir e-posbemarking.

Intekenkassie-UI

Inskrywing

'n intekenaarkassie met 'n alarmklok en bietjie meer as plat kleure In die ontwerp.

CSS-intekenaarkassie

Inskrywing

'n slim intekenkassie vir die feit van gebruik gradiënte vir die intekenknoppie, net soos die pers tint van die veld.

Intekenkassie

Intekenkassie

'n eenvoudige intekenaarkassie maar van groot effek deur ontwerp.

EMOJI-bevestigingsvorm

EMOJI

In suiwer CSS hierdie bekragtigingsvorm om die sleutel te skep of wagwoord. Terwyl ons skryf, meet die emoji die veiligheidsvlak van die vorm. Snaaks en nuuskierig sonder twyfel.

Moet dit nie misloop nie lys van 23 geanimeerde pyle in CSS.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

'N Opmerking, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   Juan Jose Perez dijo

    Uitstekende voorbeeld van voorbeelde wat hier aangebied word. Die verskeidenheid en aanpassing aan verskillende kontekste en die beste ding is dat die skakel van elke titel die demo en die bronkode bevat, alhoewel u dit met 'n knoppie moet uitlig «Sien demo» omdat ek uit nuuskierigheid dit in die titel. Dankie vir die bydrae. Groete uit Caracas.