40 formola CSS li ma jistgħux ikunu nieqsa fuq l-ebda websajt

Formola ta 'login

Jekk hemm xi ħaġa li ġeneralment hija komuni ħafna għal kwalunkwe tip ta 'websajt, dawn huma l-formoli. Il-formoli li nużaw biex nimlew l-informazzjoni ta 'kuntatt, daħħal id-dettalji tal-bank, tidħol f'netwerk soċjali jew sempliċement tagħmel tfittxija bħal dik li normalment nagħmlu kuljum fil-magna tat-tiftix tal-Google.

Allura llum se nuruk 40 formola fis-CSS li jvarjaw minn formoli ta 'kuntatt, checkout tal-karta ta' kreditu, logins, sempliċi, abbonament jew saħansitra validazzjoni. Serje ta 'forom ta' eleganti u stil kbir biex tagħti dak il-punt speċjali lill-websajt tiegħek, irrispettivament mit-tema.

Formola ta 'kuntatt minimalista

forma-minimalista

Formola ta 'kuntatt sempliċi ma' varjetà kbira ta 'effetti bħal marki li jżommu f'wiċċ l-ilma jew animazzjonijiet tal-linja. Kodiċi CSS eleganti bi ftit JavaScript. Jekk qed tfittex formola ta 'kuntatt minimalista dan huwa perfett għalik.

Artiklu relatat:
23 librerija CSS ta 'kwalità għolja għad-disinn tal-web

Forma minimalista

Minimalist

Oħra forma minima, għalkemm fis-CSS biss tkun a forma sempliċi u ta 'effett għoli. M'għandux l-animazzjonijiet minimalisti ta 'dik ta' qabel, imma għandu tajjeb ħafna bl-objettiv tiegħu.

Formola ta 'kuntatt vintage

Vintage

Formola ta 'kuntatt vintage, disinn eleganti ħafna. Jirrispondu għal dawk il-websajts biex tidher mill-mobile, għalkemm ma tinkludix validazzjoni.

Formola ta 'kuntatt ta' ittra

Ittra

dan formola ta 'kuntatt għandu animazzjoni pjuttost kurjuża: tiġi ffurmata ittra. Sempliċi, imma utli ħafna b'ħafna kulur.

Artiklu relatat:
27 karta HTML u CSS b'xejn għal blogs, kummerċ elettroniku u aktar

Formola ta 'kuntatt estiża

Formola ta 'kuntatt espansiva

dan formola ta 'kuntatt estiża Huwa biss quddiem u għandu l - validazzjoni ma 'jQuery. Aħna nikklikkjaw fuq il-buttuna f'wiċċ l-ilma u l-formola tidher b'animazzjoni vibranti. Pendenti.

Formola ta 'Kuntatt UI

Formola ta 'kuntatt

Formola ta 'Kuntatt UI hija formola magħmula f'HTML u CSS. Jispikka talli karta tal-kuntatt sempliċi li nistgħu nimlew sabiex il-kamp tat-test biss jinbidel meta jkun ikklikkjat.

Ħlas tal-kard tal-ħlas

Checkout karta tal-ħlas

Un checkout tal-kard tal-ħlas magħmula fl-HTML, CSS u JavaScript li tingħaraf b'animazzjoni li ddur il-karta tal-kreditu meta nagħfsu fuq is-CVC jew il-kaxxa tan-numru tas-sigurtà.

Disinn ċatt tal-karta tal-kreditu

Karta ta 'kreditu CSS pura

CSS pur għal checkout għal karti tal-kreditu b'kuluri ċatti. Mlewna u sempliċi ħafna li kapaċi tindika kwalità u professjonalità.

UI tal-karta tal-kreditu

Snackables

Karta ta 'kreditu oħra f'HTML, CSS u JavaScript li tispikka għal kemm hi tajba għażel id-disinn ġenerali. Insejna dwar l-animazzjonijiet f'din il-biċċa kodiċi għall-websajt tiegħek. Niżżlu f’din il-link.

Irreaġixxi Checkout

Irreaġixxi

Irreaġixxi Checkout, magħmul b'React.js, huwa distint minn l-istampa tal-ġenb li nistgħu nippersonalizzaw bis-servizzi jew prodotti li nbiegħu fl-eCommerce tagħna.

Checkout karta tal-ħlas

Popov

Din iċ-checkout tispikka għall-possibbiltà li titqiegħed immaġni fuq il-karta. A forma sempliċi u ċara magħmula bis-CSS3, HTML5 u daqsxejn ta 'jQuery. Kwalità għolja u differenti mill-bqija tal-kaxex fuq din il-lista. Tista 'tniżżel hawn din iċ-checkout tal-kard tal-ħlas.

Ħlas bil-kard tal-kreditu

Stripe

dan formola ta 'ħlas bil-karta ta' kreditu huwa pprogrammat biex jipprattika bi JavaScript għall-manipulazzjoni DOM. Fid-disinn tista 'tfakkar il-kodiċi eleganti ta' Stripe, is-servizz bankarju diġitali li qed jersaq eqreb lejn PayPal.

Karta tal-kreditu

Kuljum

Eleganti checkout għall-ħlas bil-kard differenti mill-oħrajn u bbażat fuq karta ta 'kreditu li tinsab fil-parti ta' fuq Allura li hawn taħt għandna l-formola kollha bid-dejta differenti li l-klijent irid jimla biex jagħmel il-ħlas fl-eCommerce.

Forma pass pass

Pass pass

Un forma pass pass għar-reġistrazzjoni magħmula fl-HTML, CSS u JavaScript. Erba 'passi għal kull wieħed mill-punti li tinsab fuq in-naħa tax-xellug. Animazzjonijiet lesti sew għal forma lesta ħafna. Rakkomandat ħafna.

Forma interattiva

Interattiv

Un forma interattiva multi-pass magħmul bl-HTML, CSS u JavaScript. Jispikka għall-animazzjoni ta 'transizzjoni bejn kull wieħed mill-passi. Għandu mess eleganti li ma jgħaddix inosservat.

Forma pass pass

Pass pass

dan forma pass pass jispikka minħabba li huwa pjuttost kreattiv. Int se twieġeb il-mistoqsijiet sabiex tkun tista 'tirritorna għalihom fi kwalunkwe ħin billi tkun viżwalment preżenti fuq l-iskrin il-ħin kollu.

Pass pass

Paso

Pass pass forma magħmula f'HTML, CSS u JavaScript. Huwa kkaratterizzat mill-animazzjoni ta 'transizzjoni bejn kull wieħed mill-passi.

Formola ta 'Jquery b'ħafna stadji

JQuery multi pass

Jekk għandek a forma twila ħafna, dan huwa perfett għal sezzjonijiet differenti b'bar ta 'progress impressjonanti ħafna. Ibbażat fuq jQuery u CSS, jispikka għad-disinn tiegħu u għall-eleganti kbira tiegħu.

Forma ta 'animazzjoni UI

Formola ta 'animazzjoni

It-transizzjonijiet ta 'dan Forma ta 'animazzjoni UI huma ibbażat fuq Domink Marskusic. Attenzjoni għall-effett kreattiv tal-kaxxa blu meta nikklikkjaw fuq uħud miż-żewġ oqsma tal-login.

Formola tal-ħolqien / login tal-kont

Ħolqien tal-Login

Gimmick login u ħolqien ta 'kont li hija bbażata fuq l-animazzjoni x'jiġri bejn dawk iż-żewġ taqsimiet. Preżenza attwali ħafna u impressjonanti li għandha ssir fl-HTML, JavaScript u CSS.

Serp Highlight

Snake

Serp Highlight huwa wieħed mill-iktar login impressjonanti ta 'kwalunkwe lista li jispikka għall-animazzjoni eleganti li tidher malajr fil-mument li nikklikkjaw fuq waħda miż-żewġ oqsma.

Skrin tal-login

Idħol

Divina dan id-disinn skrin tal-login hekk huma tagħhom animazzjonijiet u kemm hu kreattiv. Jekk trid tkun l-iktar wieħed kurrenti fejn jidħol id-disinn tal-web, din il-formola ma tistax tkun nieqsa. Indispensabbli.

Idħol fid-disinn tal-UI

Formola ta 'login

Iddisinjat bl-użu ta 'HTML, Sass, u jQuery. Idħol fid-disinn tal-UI es eleganti u ċara dwar is-suġġett li ma jonqosx animazzjonijiet sottili biex issir ieħor mill-favoriti fuq il-lista.

Login u ħolqien ta 'kont UI

Reġistrazzjoni tal-login

Speċjali disinn ta 'login u ħolqien ta' kont UI  għall-kuluri u għall-preżentazzjoni fi karta kbira waħda ż-żewġ taqsimiet. Ieħor mill-isbaħ fl-eżekuzzjoni li ma nistgħux nitilfu. Magħmul fl-HTML, CSS u JavaScript.

Żbalji dannużi

Obnoxious

Żbalji dannużi Huwa login tajjeb ħafna minħabba l-animazzjoni ta ' għelieqi bi obnoxious.css. Oriġinali biex tkun login divertenti, bla ħsieb u differenti ħafna. Oriġinali mingħajr ebda dubju għall-websajt tagħna.

Login CSS HTML

CSS

Logħba kurjuża mill-ikoni differenti li juru kull waħda mill-għelieqi biex tieħu l-viżitatur kull fejn irridu. Jispikkaw ukoll l-ilwien magħżula fil-kuluri. Ma għandu l-ebda animazzjoni. Huwa magħmul f'HTML u CSS biex timplimentah fuq il-websajt għal klijent jew tagħna.

Formola ta 'login modali

Modali

dan Formola ta 'login modali hija ispirata mil - lingwa ta ' disinn magħruf għad-Disinn tal-Materjal. Rajna f'ħafna applikazzjonijiet fuq apparat mobbli. F'dan il-kodiċi għandna pannell ta 'login u pannell ta' reġistrazzjoni li huwa moħbi awtomatikament. Il-pannell tar-reġistrazzjoni jista 'jiġi attivat billi tikklikkja fuq il-kolonna blu fuq il-lemin. Għandha animazzjoni kbira biex tkun login speċjali u impressjonanti ħafna.

Formola flexbox

Flessbox

Nibdew il-formoli tat-tfittxija b’dan forma ibbażat fuq il-flexbox. Jispikka għall-kulur aħmar tat- «tfittxija» u għal ftit iktar għal qasam ta 'tfittxija eleganti għall-websajt tiegħek.

Kaxxa animata

Kaxxa animata

Ma 'dan kaxxa animata ikklikkja fuq l-ikona tal-lenti u tidher animazzjoni blu qawwi sabiex ikollna biss nittajpjaw it-tfittxija li se nagħmlu fuq il-websajt. Magħmul bl-HTML, CSS u JavaScript.

Fittex qasam

Imbotta tfittxija

a linja kbira timxi fuq l-iskrin sabiex meta nagħfsuha nibdew nittajpjaw it-tfittxija. A buttuna pickup biex tiddefinixxi dan formola ta 'tfittxija sempliċi.

Qasam ta 'tfittxija sempliċi ikklikkja fuq

Waze

Qasam ta 'tfittxija sempliċi ikklikkja fuq hija bbażata fuq interazzjoni li tidher fi l-App tal-Komunità tas-Sewwieq Waze vettura. L-ikoni u l-istampi kollha huma magħmula bis-CSS. Jispikka għal dawk l-ikoni li jippermettulna nwettqu tfittxijiet speċifiċi għal prodott jew servizz. Impressjonanti għal kemm hu kiesaħ.

Effett ta 'input ta' test CSS

Input CSS

Effett ta 'input ta' test CSS tinkludi serje ta ' animazzjonijiet fit-test u fil-kexxun tat-tfittxija li tkun tfittex bir-reqqa fil-forma.

Tfittxija fuq skrin sħiħ

Tfittxija fuq skrin sħiħ

Din l-entrata minn tfittxija fuq skrin sħiħ jaħdem ma 'kwalunkwe tip ta' tqassim jew pożizzjoni. Jeħtieġ stili element speċifiku għall-kontenitur u tfittxija-overlay li jkun jinsab fl-għerq. Huwa kkaratterizzat minn animazzjoni bouncing fil-mument li nagħfsu l-buttuna tat-tfittxija.

Fittex

Fittex

Un formola ta ’tfittxija sempliċi li huwa jħobb jilgħab mal-pożizzjonijiet differenti u animazzjonijiet. Aħna nikklikkjaw fuq il-buttuna tat-tfittxija u l-kexxun sħiħ jidher biex ittajpja l-kliem. Kurrenti ħafna u rakkomandat ħafna għal kemm hu sempliċi.

L-ebda mistoqsija

L-ebda mistoqsija

L-ebda mistoqsija es forma sempliċi bil-qasam tat-test u l-għażla li tagħżel xi tweġibiet biex l-utent jagħżelhom. Ħafna viżwalment biex tkun waħda mill-aqwa.

Formola ta 'abbonament popup

Abbona

Ma 'dan formola ta 'abbonament popup, nikklikkjaw fuq il-buttuna li żżomm f'wiċċ l-ilma u teħodna lejna forma b'ton umoristiku ħafna u qasam fejn tidħol l-email. Perfetta għall-kummerċ bl-email.

UI tal-kaxxa tal-abbonament

Abbonament

a kaxxa tal-abbonament bil-qanpiena tal-allarm u ftit aktar minn kuluri ċatti Fid-disinn.

Kaxxa tal-abbonament CSS

Abbonament

a kaxxa tal-abbonament intelliġenti għall-fatt ta ' uża gradjenti għall-buttuna tabbona bħad-lewn vjola tal-għalqa.

Kaxxa tal-abbonament

Kaxxa tal-abbonament

a kaxxa ta 'abbonament sempliċi iżda ta 'effett kbir mid-disinn.

Formola ta ’validazzjoni EMOJI

EMOJI

Fil pur CSS dan formola ta ’validazzjoni biex toħloq iċ-ċavetta jew password. Hekk kif niktbu, l-emoji se jkejjel il-livell ta 'sigurtà tal-formola. Daħk u kurjuż mingħajr dubju.

Titlifx dan lista ta '23 vleġġa animata fis-CSS.


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

Kumment, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1.   Juan Jose Perez qal

    Kampjun eċċellenti ta 'eżempji ppreżentati hawn. Il-varjetà u l-adattament għal kuntesti differenti u l-aħjar ħaġa hija li l-link ta ’kull titlu jinkludi d-demo u l-kodiċi tas-sors għalkemm għandek tenfasizzaha b’buttuna« Ara d-demo »għax kien mill-kurżità li skoprejtha fit-titlu . Grazzi tal-kontribuzzjoni. Tislijiet minn Caracas.