Ak existuje niečo, čo je zvyčajne veľmi bežné pre akýkoľvek typ webových stránok, sú to tieto formuláre. Formuláre, ktoré používame na vyplnenie kontaktných informácií, zadajte bankové údaje, prihláste sa na sociálnu sieť alebo jednoducho vyhľadajte, ako to zvyčajne robíme každý deň vo vyhľadávacom nástroji Google.
Takže dnes vám to ukážeme 40 formulárov v CSS počnúc kontaktnými formulármi, platbami na kreditných kartách, prihlásením, jednoduchým, predplatným alebo dokonca overením. Rad foriem vysokej elegancie a štýlu, vďaka ktorým bude váš web vynikajúci, bez ohľadu na tému.
Minimalistický kontaktný formulár
Jednoduchý kontaktný formulár s a veľké množstvo efektov ako sú plávajúce značky alebo riadkové animácie. Elegantný kód CSS s trochou kódu JavaScript. Ak hľadáte a minimalistický kontaktný formulár toto je pre vás ideálne.
Minimalistická forma
Otro minimálna forma, aj keď iba v CSS byť a jednoduchá a vysoko efektívna forma. Nemá minimalistické animácie predchádzajúcej, ale svoj cieľ plní veľmi dobre.
Vintage kontaktný formulár
Vintage kontaktný formulár, veľmi elegantný dizajn. Reaguje na tieto webové stránky vidno z mobilu, hoci nezahŕňa validáciu.
Listový kontaktný formulár
toto kontaktný formulár má dosť kurióznu animáciu: vytvorí sa list. Jednoduché, ale veľmi užitočné s dostatkom farieb.
Rozšírený kontaktný formulár
toto kontaktný formulár rozšírený Je to iba predná časť a má validácia pomocou jQuery. Klikneme na plávajúce tlačidlo a formulár sa objaví so živou animáciou. Vynikajúci.
Kontaktný formulár UI
Kontaktný formulár UI je to forma vytvorená v HTML a CSS. Vyniká bytím jednoduchá karta kontaktu ktoré môžeme vyplniť, aby sa po kliknutí zmenilo iba textové pole.
Pokladňa platobnou kartou
Un platba kartou vyrobené v HTML, CSS a JavaScript, ktoré sa vyznačuje rotujúcou animáciou kreditnej karty, keď stlačíme pole CVC alebo bezpečnostné číslo.
Plochý dizajn kreditnej karty
Čistý CSS pre a pokladňa za kreditné karty v plochých farbách. Farebné a veľmi jednoduché, ktoré môžu naznačovať kvalitu a profesionalitu.
Používateľské rozhranie kreditnej karty
Ďalšia kreditná karta v jazyku HTML, CSS a JavaScript, ktorá vyniká tým, aká je dobrá zvolil celkový dizajn. V tejto časti kódu pre váš web sme zabudli na animácie. Stiahnite si ho na tomto odkaze.
Reagovať Pokladňa
Reagovať Pokladňa, vyrobené pomocou React.js, sa vyznačuje bočný obrázok, ktorý môžeme prispôsobiť so službami alebo produktmi, ktoré predávame v našom elektronickom obchode.
Pokladňa platobná karta
Táto pokladňa vyniká možnosťou vloženia obrázka na kartu. A jednoduchá a prehľadná forma vytvorená pomocou CSS3, HTML5 a trochu jQuery. Vysoko kvalitný a odlišný od ostatných platieb v tomto zozname. Môžete si stiahnuť tu táto platba kartou.
Platba kreditnou kartou
toto formulár na platbu kreditnou kartou je naprogramovaný na cvičenie s JavaScript pre manipuláciu s DOM. Dizajnovo si môžete pamätať elegantný kód Stripe, služby digitálneho bankovníctva, ktorá sa blíži k PayPalu.
Kreditná karta
Elegantný pokladňa za platbu kartou odlišné od ostatných a založené na kreditná karta umiestnená v hornej časti Aby sme nižšie mali celý formulár s rôznymi údajmi, ktoré musí klient vyplniť, aby mohla uskutočniť platbu v elektronickom obchode.
Krok za krokom formulár
Un krok za krokom formulár na registráciu vykonanú v HTML, CSS a JavaScript. Štyri kroky pre každý z bodov umiestnený na ľavej strane. Výborne hotové animácie pre vysoko hotovú formu. Vysoko odporúčané
Interaktívna forma
Un interaktívna forma multi-step made with HTML, CSS and JavaScript. Vyniká animáciou prechodu medzi jednotlivými krokmi. Má elegantný nádych, ktorý nezostane bez povšimnutia.
Krok za krokom formulár
toto krok za krokom formulár vyniká tým, že je celkom kreatívny. Odpoviete na otázky aby ste sa k nim mohli kedykoľvek vrátiť tým, že budete neustále vizuálne prítomní na obrazovke.
Krok za krokom
Krok za krokom je formulár hotový v HTML, CSS a JavaScripte. Vyznačuje sa animáciou prechodu medzi jednotlivými krokmi.
Viacstupňový formulár JQuery
Ak máte veľmi dlhá forma, to je ideálne riešenie pre rôzne sekcie s veľmi nápadným indikátorom priebehu. Na základe jQuery a CSS vyniká svojim dizajnom a skvelou eleganciou.
Formulár animácie používateľského rozhrania
Prechody tohto Formulár animácie používateľského rozhrania sú na základe Domink Marskusic. Pozor na kreatívny efekt modrého poľa, keď klikneme na niektoré z dvoch polí prihlásenia alebo relácie.
Formulár na vytvorenie účtu / prihlásenie
Trik prihlásenie a vytvorenie účtu ktorá je založená na animácii čo sa stane medzi týmito dvoma časťami. Veľmi aktuálnu a zarážajúcu prítomnosť je možné vykonať v jazykoch HTML, JavaScript a CSS.
Zvýraznenie hada
Zvýraznenie hada je jedným z najpozoruhodnejších prihlasovacích údajov zo všetkých zoznamov, ktoré vyniká elegantnou animáciou ktorá vzniká rýchlo v okamihu, keď klikneme na jedno z dvoch polí.
Prihlasovacia obrazovka
Zbožnite tento dizajn prihlasovacia obrazovka také sú ich animácie a ako je to kreatívne. Ak chcete byť najaktuálnejší, čo sa týka webdizajnu, tento formulár nemôže chýbať. Nepostrádateľné.
Dizajn užívateľského rozhrania
Navrhnuté pomocou HTML, Sass a jQuery. Dizajn užívateľského rozhrania es elegantný a jasný na tému, ktorej nechýbajú jemné animácie, aby sa stala ďalšou z obľúbených položiek v zozname.
Prihlásenie a vytvorenie používateľského rozhrania
Špeciálny návrh prihlásenia a používateľské rozhranie na vytvorenie účtu pre farby a pre prezentáciu v jedna veľká karta dve časti. Ďalšia z najkrajších v poprave, ktorú si nemôžeme nechať ujsť. Vytvorené v jazyku HTML, CSS a JavaScript.
Nepríjemné chyby
Nepríjemné chyby Je to skvelé prihlasovacie meno kvôli animácii polia s protivnými.css. Originál je zábavné, bezstarostné a veľmi odlišné prihlásenie. Originál bez akýchkoľvek pochybností pre náš web.
Prihláste sa do CSS HTML
Zvedavé prihlásenie rôznymi ikonami ktoré ukazujú každé z polí, aby návštevníka zaviedli kamkoľvek chceme. Vyniknú aj odtiene zvolené vo farbách. Nemá žiadnu animáciu. Vyrába sa v HTML a CSS na implementáciu na webovú stránku pre klienta alebo našu vlastnú.
Modálny prihlasovací formulár
toto Modálny prihlasovací formulár je inšpirovaný jazykom dizajn známy pre Material Design. Videli sme to v mnohých aplikáciách na mobilných zariadeniach. V tomto kóde máme prihlasovací panel a registračný panel, ktoré sú predvolene skryté. Registračný panel je možné aktivovať kliknutím na modrý stĺpec na pravej strane. Má skvelú animáciu a je veľmi zvláštnym a zarážajúcim prihlásením.
Formulár flexbox
Týmto začneme vyhľadávacie formuláre formulár založené na flexboxe. Vyniká červenou farbou «vyhľadávania» a trochu viac elegantným vyhľadávacím poľom pre váš web.
Animovaná škatuľka
S týmto animované políčko kliknite na ikonu lupy a objaví sa jasne modrá animácia takže musíme zadať iba hľadanie, ktoré sa chystáme vykonať na webovej stránke. Vytvorené pomocou HTML, CSS a JavaScriptu.
Vyhľadávacie pole
Una cez obrazovku prechádza veľká čiara takže keď ho stlačíme, začneme písať hľadaný výraz. Tlačidlo na vyzdvihnutie, ktoré to definuje jednoduchý vyhľadávací formulár.
Jednoduché vyhľadávacie pole kliknite na
Jednoduché vyhľadávacie pole kliknite na je založené na interakcii videnej v komunitná aplikácia Waze Driver dopravný prostriedok. Všetky ikony a obrázky sú vytvárané pomocou CSS. Vyniká tými ikonami, ktoré nám umožňujú vykonávať konkrétne vyhľadávania výrobkov alebo služieb. Štrajkujúce, aké je to super.
Efekt zadávania textu CSS
Efekt zadávania textu CSS obsahuje sériu animácie v zásuvke na text a vyhľadávanie byť opatrným hľadačom vo forme.
Vyhľadávanie na celú obrazovku
Tento záznam z vyhľadávanie na celú obrazovku pracuje s akýmkoľvek typom usporiadania alebo polohy. Vyžaduje štýly konkrétny kontajner a prvok prekrytia vyhľadávania byť umiestnený v koreni. Vyznačuje sa skákacou animáciou v okamihu, keď stlačíme tlačidlo vyhľadávania.
Hľadať
Un vyhľadávací formulár jednoduché, že rád sa hrá s rôznymi pozíciami a animácie. Klikneme na tlačidlo vyhľadávania a zobrazí sa celá zásuvka na napísanie slov. Veľmi aktuálne a dôrazne sa odporúča, aké jednoduché je.
Žiadne otázky
Žiadna otázka es jednoduchý formulár s textovým poľom a možnosť vybrať pre používateľa niekoľko odpovedí. Vizuálne veľa, aby ste boli jedným z najlepších.
Formulár vyskakovacieho okna
S týmto vyskakovací formulár predplatného, klikneme na plávajúce tlačidlo a dovedie nás to k formulár s veľmi vtipným tónom a pole, do ktorého zadáte e-mail. Perfektné pre e-mailový marketing.
Používateľské rozhranie predplatného
Una schránka na predplatné s budíkom a o niečo viac ako ploché farby V dizajne.
Schránka na predplatné CSS
Una inteligentná predplatná krabica pre skutočnosť používať prechody pre tlačidlo prihlásenia na odber rovnako ako fialový odtieň poľa.
Políčko na predplatné
Una jednoduché predplatné pole ale s veľkým dizajnom.
EMOJI overovací formulár
V čistom CSS toto validačný formulár vytvoriť kľúč alebo heslo. Keď píšeme, emodži budú merať úroveň zabezpečenia formulára. Bez pochýb vtipné a zvedavé.
Toto si nenechajte ujsť zoznam 23 animovaných šípok v CSS.
Vynikajúca ukážka tu uvedených príkladov. Rozmanitosť a prispôsobenie sa rôznym kontextom a najlepšie na tom je, že odkaz na každý titul obsahuje ukážku a zdrojový kód, aj keď by ste to mali zvýrazniť tlačidlom «Zobraziť ukážku», pretože som to zo zvedavosti objavil v názve . Ďakujem za príspevok. Zdravím z Caracasu.
Veľmi mi to pomohlo, ďakujem.