Awọn fọọmu CSS 40 ti ko le padanu lori oju opo wẹẹbu eyikeyi

Ti nkan kan ba wa ti o wọpọ nigbagbogbo fun eyikeyi iru oju opo wẹẹbu, iwọnyi ni awọn fọọmu naa. Awọn fọọmu ti a lo lati kun alaye olubasọrọ, tẹ awọn alaye banki sii, wọle sinu nẹtiwọọki awujọ kan tabi ṣe iṣawari bi eyi ti a maa n ṣe lojoojumọ ninu ẹrọ wiwa Google.

Nitorina loni a yoo fi ọ han Awọn fọọmu 40 ni CSS orisirisi lati awọn fọọmu olubasọrọ, awọn isanwo kaadi kirẹditi, awọn iwọle, rọrun, ṣiṣe alabapin tabi paapaa afọwọsi. A lẹsẹsẹ ti awọn fọọmu ti didara ati ara nla lati fun ni aaye pataki yẹn si oju opo wẹẹbu rẹ, laibikita akori naa.

Fọọmu olubasọrọ Minimalist

Fọọmu olubasọrọ ti o rọrun pẹlu kan ọpọlọpọ awọn ipa gẹgẹ bi awọn aami lilefoofo tabi awọn ohun idanilaraya laini. Koodu CSS ti o wuyi pẹlu diẹ ninu JavaScript. Ti o ba n wa a fọọmu olubasọrọ ifọwọkan eyi jẹ pipe fun ọ.

Nkan ti o jọmọ:

23 awọn ile-ikawe CSS ti o ga julọ fun apẹrẹ wẹẹbu

Fọọmu Minimalist

Miiran pọọku fọọmu, botilẹjẹpe nikan ni CSS lati jẹ a fọọmu ti o rọrun ati giga. Ko ni awọn ohun idanilaraya ti o kere julọ ti iṣaaju, ṣugbọn o ṣe dara julọ pẹlu ipinnu rẹ.

Fọọmù olubasọrọ ojoun

Fọọmù olubasọrọ ojoun, apẹrẹ ti o yangan pupọ. Idahun fun awọn oju opo wẹẹbu wọnyẹn lati rii lati alagbeka, botilẹjẹpe ko pẹlu afọwọsi.

Fọọmu olubasọrọ lẹta

Este fọọmu olubasọrọ o ni iwara kuku iyanilenu: a ṣẹda lẹta kan. Rọrun, ṣugbọn o wulo pupọ pẹlu ọpọlọpọ awọ.

Nkan ti o jọmọ:

27 HTML ọfẹ ati awọn kaadi CSS fun awọn bulọọgi, e-commerce ati diẹ sii

Fikun olubasọrọ fọọmu

Este fẹ olubasọrọ fọọmu O ti wa ni nikan ni iwaju opin ati ki o ni awọn afọwọsi pẹlu jQuery. A tẹ lori bọtini lilefoofo ati pe fọọmu naa yoo han pẹlu iwara gbigbọn. Dayato.

Olubasọrọ Fọọmu UI

Olubasọrọ Fọọmu UI o jẹ fọọmu ti a ṣe ni HTML ati CSS. O duro fun jije kaadi olubasọrọ ti o rọrun pe a le fọwọsi ki aaye ọrọ nikan yipada nigbati o tẹ.

Ibi isanwo kaadi sisan

Un isanwo kaadi sisan ṣe ni HTML, CSS ati JavaScript eyiti yato si nipasẹ yiyi iwara kaadi kirẹditi nigba ti a tẹ lori CVC tabi aaye nọmba nọmba aabo.

Apẹrẹ kaadi kirẹditi apẹrẹ

CSS mimọ fun a isanwo fun awọn kaadi kirẹditi ni awọn awọ fifẹ. Awọ ati irorun ti o lagbara lati tọka didara ati ọjọgbọn.

Kaadi kirẹditi UI

Kaadi kirẹditi miiran ni HTML, CSS ati JavaScript ti o duro fun bi o ṣe dara to yàn awọn ìwò oniru. A gbagbe nipa awọn ohun idanilaraya ni nkan koodu yii fun oju opo wẹẹbu rẹ. Ṣe igbasilẹ rẹ ni ọna asopọ yii.

Ṣe atunṣe isanwo

Ṣe atunṣe isanwo, ti a ṣe pẹlu React.js, jẹ iyatọ nipasẹ aworan ẹgbẹ ti a le ṣe akanṣe pẹlu awọn iṣẹ tabi awọn ọja ti a ta ni eCommerce wa.

Kaadi isanwo isanwo

Ibi isanwo yii duro fun iṣeeṣe ti fifi aworan si kaadi. A fọọmu ti o rọrun ati mimọ ti a ṣe pẹlu CSS3, HTML5 ati ki o kan bit ti jQuery. Didara giga ati yatọ si iyokuro awọn isanwo lori atokọ yii. O le ṣe igbasilẹ nibi isanwo kaadi sisan yi.

Owo sisan kaadi kirẹditi

Este fọọmu isanwo kaadi kirẹditi ti wa ni siseto lati niwa pẹlu JavaScript fun ifọwọyi DOM. O le ranti ninu apẹrẹ aṣa koodu didara ti Stripe, iṣẹ ifowopamọ oni-nọmba ti o sunmọ PayPal.

Kaddi kirediti

Ohun yangan isanwo fun sisan kaadi yatọ si awọn miiran ati da lori kaadi kirẹditi kan ti o wa ni oke nitorina ni isalẹ a ni gbogbo fọọmu pẹlu data oriṣiriṣi ti alabara ni lati kun lati ṣe isanwo ni eCommerce.

Igbese nipa igbese fọọmu

Un igbese nipa igbese fọọmu fun iforukọsilẹ ti a ṣe ni HTML, CSS ati JavaScript. Awọn igbesẹ mẹrin fun ọkọọkan awọn aaye naa wa ni apa osi. Awọn ohun idanilaraya ti pari daradara fun fọọmu ti o pari pupọ. Niyanju Giga.

Fọọmu ibanisọrọ

Un fọọmu ibanisọrọ ọpọ-kọja ti a ṣe pẹlu HTML, CSS ati JavaScript. O wa jade fun iwara iyipada laarin ọkọọkan awọn igbesẹ. O ni ifọwọkan didara ti kii yoo ṣe akiyesi.

Igbese nipa igbese fọọmu

Este igbese nipa igbese fọọmu duro jade fun jijẹ ohun ti o ṣẹda. Iwọ yoo dahun awọn ibeere naa ki o le pada si ọdọ wọn nigbakugba nipa jijẹ oju loju iboju ni gbogbo igba.

Igbesẹ nipasẹ igbese

Igbese nipa igbese fọọmu ti a ṣe ni HTML, CSS ati JavaScript. O ṣe apejuwe nipasẹ iwara iyipada laarin ọkọọkan awọn igbesẹ.

Ọna pupọ Jquery fọọmu

Ti o ba ni a fọọmu ti o gun pupo, eyi jẹ pipe fun awọn apakan oriṣiriṣi pẹlu ọpa ilọsiwaju ti o kọlu pupọ. Da lori jQuery ati CSS, o wa jade fun apẹrẹ rẹ ati fun didara nla rẹ.

Fọọmu iwara UI

Awọn iyipada ti eyi Fọọmu iwara UI wọn jẹ da lori Domink Marskusic. Akiyesi si ipa ẹda ti apoti ni buluu nigbati a tẹ lori diẹ ninu awọn aaye meji ti iwọle tabi wiwọle.

Fọọmu akọọlẹ / fọọmu iwọle

A gimmick buwolu wọle ati ẹda akọọlẹ eyi ti o da lori iwara ohun ti o ṣẹlẹ laarin awọn apakan meji wọnyẹn. Gan lọwọlọwọ ati iyalẹnu niwaju lati ṣee ṣe ni HTML, JavaScript ati CSS.

Ejo Saami

Ejo Saami jẹ ọkan ninu iwọle ti o wu julọ julọ ti eyikeyi atokọ ti dúró fun iwara ere idaraya ti o han ni kiakia akoko ti a tẹ lori ọkan ninu awọn aaye meji naa.

Iboju wiwọle

Ibawi apẹrẹ yii iboju wiwọle bẹẹ naa ni awọn wọn awọn idanilaraya ati bii o ṣe ṣẹda. Ti o ba fẹ lati jẹ lọwọlọwọ julọ nigbati o ba de apẹrẹ wẹẹbu, fọọmu yii ko le padanu. Ko ṣee ṣe.

Buwolu wọle UI apẹrẹ

Ti ṣe apẹrẹ lilo HTML, Sass, ati jQuery. Buwolu wọle UI apẹrẹ es elegant ati ki o ko lori koko ti ko ṣe alaini awọn ohun idanilaraya arekereke lati di miiran ti awọn ayanfẹ lori atokọ naa.

Wọle ati ṣiṣẹda akọọlẹ UI

A pataki Apẹrẹ wiwọle ati ẹda UI  fun awọn awọ ati fun fifihan ni kaadi nla kan awọn apakan meji. Omiiran ti lẹwa julọ ninu ipaniyan ti a ko le padanu. Ṣe ni HTML, CSS ati JavaScript.

Awọn aṣiṣe irira

Awọn aṣiṣe irira O ti wa ni a nla wiwọle nitori ti iwara ti awọn aaye pẹlu irira.css. Atilẹba lati jẹ igbadun, aibikita ati wiwọle ti o yatọ pupọ. Atilẹba laisi iyemeji eyikeyi fun oju opo wẹẹbu wa.

Buwolu wọle CSS HTML

Wiwọle iyanilenu kan nipasẹ awọn oriṣiriṣi awọn aami iyẹn fihan kọọkan awọn aaye lati mu alejo ni ibikibi ti a fẹ. Awọn iboji ti a yan ninu awọn awọ tun duro. Ko ni iwara eyikeyi. O ṣe ni HTML ati CSS lati ṣe imuse lori oju opo wẹẹbu fun alabara tabi tiwa.

Fọọmu wiwọle Modal

Este Fọọmu wiwọle Modal ni atilẹyin nipasẹ ede ti apẹrẹ ti a mọ fun Apẹrẹ Ohun elo. A ti rii ninu ọpọlọpọ awọn ohun elo lori awọn ẹrọ alagbeka. Ninu koodu yii a ni igbimọ iwọle ati nronu iforukọsilẹ ti o farapamọ nipasẹ aiyipada. A le mu nronu iforukọsilẹ ṣiṣẹ nipa tite lori iwe bulu ni apa ọtun. O ni iwara nla lati jẹ pataki pupọ ati iwọle iwọle.

Fọọmu apoti fọọmu

A bẹrẹ awọn fọọmu wiwa pẹlu eyi fọọmu da lori flexbox. O wa jade fun awọ pupa ti «wiwa» ati fun diẹ diẹ sii fun aaye wiwa yangan fun oju opo wẹẹbu rẹ.

Ere idaraya

Pẹlu eyi ti ere idaraya apoti tẹ lori aami gilasi iyìn ati iwara buluu didan yoo han ki a nikan ni lati tẹ wiwa ti a yoo ṣe lori oju opo wẹẹbu naa. Ṣe pẹlu HTML, CSS ati JavaScript.

Aaye wiwa

una laini nla gbalaye kọja iboju nitorinaa nigba ti a ba tẹ a bẹrẹ titẹ wiwa naa. Bọtini agbẹru lati ṣalaye eyi fọọmu wiwa ti o rọrun.

Ilẹ wiwa ti o rọrun tẹ lori

Ilẹ wiwa ti o rọrun tẹ lori da lori ibaraenisepo ti a rii ninu ohun elo Waze Driver Community App ọkọ ayọkẹlẹ. Gbogbo awọn aami ati awọn aworan ni a ṣe pẹlu CSS. O duro fun awọn aami wọnyẹn ti o gba wa laaye lati ṣe awọn wiwa kan pato fun ọja tabi iṣẹ kan. Lilu nitori bi o ṣe tutu to.

Ipa titẹ ọrọ CSS

Ipa titẹ ọrọ CSS pẹlu kan lẹsẹsẹ ti awọn ohun idanilaraya ninu ọrọ ati drawer wiwa lati jẹ oluwa ṣọra ni fọọmu.

Iwadi iboju kikun

Yi titẹsi lati wiwa iboju kikun o ṣiṣẹ pẹlu eyikeyi iru ipilẹ tabi ipo. Nilo awọn aṣa eiyan-kan pato ati eroja wiwa pupọ lati wa ni gbongbo. O jẹ ẹya nipasẹ iwara bouncing ni akoko ti a tẹ bọtini wiwa.

Ṣawari

Un fọọmu wiwa o rọrun pe o fẹran lati ṣere pẹlu awọn ipo oriṣiriṣi ati awọn ohun idanilaraya. A tẹ lori bọtini wiwa ati pe drawer pipe yoo han lati tẹ awọn ọrọ naa. Lọwọlọwọ pupọ ati iṣeduro niyanju fun bii o ṣe rọrun.

Ko si ibeere

Ko si ibeere es fọọmu ti o rọrun pẹlu aaye ọrọ ati aṣayan lati yan diẹ ninu awọn idahun fun olumulo lati yan wọn. Iṣowo nla ni oju lati jẹ ọkan ninu awọn ti o dara julọ.

Fọọmù ṣiṣe alabapin agbejade

Pẹlu eyi fọọmu ṣiṣe alabapin agbejade, a tẹ lori bọtini lilefoofo ati pe yoo mu wa lọ si fọọmu pẹlu ohun orin pupọ pupọ ati aaye kan nibiti lati tẹ imeeli sii. Pipe fun titaja imeeli.

Apoti alabapin UI

una alabapin apoti pẹlu agogo itaniji ati diẹ diẹ sii ju awọn awọ alapin Ninu apẹrẹ.

CSS apoti alabapin

una smati alabapin apoti fun o daju ti lo gradients fun bọtini ṣiṣe alabapin gẹgẹ bi awọ eleyi ti aaye.

Apoti alabapin

una apoti ṣiṣe alabapin ti o rọrun ṣugbọn ti ipa nla nipasẹ apẹrẹ.

Fọọmù afọwọsi EMOJI

Ni mimọ CSS eyi fọọmu afọwọsi lati ṣẹda bọtini tabi ọrọ igbaniwọle. Bi a ṣe nkọwe, emoji yoo wọn ipele aabo ti fọọmu naa. Funny ati iyanilenu laisi iyemeji.

Maṣe padanu eyi atokọ ti awọn ọfa ere idaraya 23 ni CSS.