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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ż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.

Idħol CSS HTML

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

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

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

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

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

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

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ħ

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

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

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

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

Kaxxa tal-abbonament CSS

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

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

Formola ta ’validazzjoni 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.