40 formulárov CSS, ktoré nemôžu chýbať na žiadnom webe

Prihlasovací formulár

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

formovo-minimalistický

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.

CSS
Súvisiaci článok:
23 vysokokvalitných knižníc CSS pre webdizajn

Minimalistická forma

minimalista

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

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

písmeno

toto kontaktný formulár má dosť kurióznu animáciu: vytvorí sa list. Jednoduché, ale veľmi užitočné s dostatkom farieb.

Karty vznášadla
Súvisiaci článok:
27 bezplatných kariet HTML a CSS pre blogy, elektronický obchod a ďalšie

Rozšírený kontaktný formulár

Rozsiahly 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

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

Pokladňa platobná karta

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á kreditná karta CSS

Č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

Občerstvenie

Ď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ť

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

Popov

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

Stripe

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

denná

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

Krok za krokom

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

interaktívne

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

Krok za krokom

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

paso

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

JQuery viacstupňový

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

Formulár animácie

Prechody tohto Formulár animácie používateľského rozhrania 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

Vytvorenie prihlásenia

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

Had

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

Prihlásiť sa

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

Prihlasovací formulár

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

Prihlasovacia registrácia

Š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

protivný

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

CSS

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

modal

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

flexboxu

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

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

Vyhľadávanie push

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

Waze

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

Vstup 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

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ť

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

Ž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

Odoslať

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

Predplatné

Una schránka na predplatné s budíkom a o niečo viac ako ploché farby V dizajne.

Schránka na predplatné CSS

Predplatné

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é

Políčko na predplatné

Una jednoduché predplatné pole ale s veľkým dizajnom.

EMOJI overovací formulár

emoji

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.


2 komentáre, nechajte svoj

Zanechajte svoj komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

*

*

  1. Zodpovedný za údaje: Miguel Ángel Gatón
  2. Účel údajov: Kontrolný SPAM, správa komentárov.
  3. Legitimácia: Váš súhlas
  4. Oznamovanie údajov: Údaje nebudú poskytnuté tretím stranám, iba ak to vyplýva zo zákona.
  5. Ukladanie dát: Databáza hostená spoločnosťou Occentus Networks (EU)
  6. Práva: Svoje údaje môžete kedykoľvek obmedziť, obnoviť a vymazať.

  1.   Juan José Pérez dijo

    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.

  2.   Rudolf Gallegos dijo

    Veľmi mi to pomohlo, ďakujem.