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

Wiwọle fọọmu

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

Onitẹgbẹ

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

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

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

Fọọmu olubasọrọ ti o gbooro sii

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

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

Kaadi isanwo isanwo

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ẹ

Kaadi kirẹditi CSS mimọ

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

Awọn ounjẹ ipanu

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

Idahun

Ṣ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

Popov

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

adikala

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

Daily

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

Igbesẹ nipasẹ igbese

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ọ

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

Igbesẹ nipasẹ igbese

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

Paso

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

Igbesẹ pupọ JQuery

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

Fọọmu iwara

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

Wiwọle Creation

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

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

Wo ile

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ẹ

Wiwọle fọọmu

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

Iforukọsilẹ

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

Ibanujẹ

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

CSS

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

olu

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

Flexbox

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

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

Titari 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

Waze

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

Iwọle 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

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

Ṣ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

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

alabapin

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

Ṣiṣe alabapin

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

CSS apoti alabapin

Ṣiṣe 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

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

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.


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Ọrọìwòye kan, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   Juan Jose Perez wi

    Apeere ti o dara julọ ti awọn apẹẹrẹ ti a gbekalẹ nibi. Oniruuru ati aṣamubadọgba si awọn ipo oriṣiriṣi ati ohun ti o dara julọ ni pe ọna asopọ akọle kọọkan pẹlu demo ati koodu orisun botilẹjẹpe o yẹ ki o ṣe afihan rẹ pẹlu bọtini kan “Wo demo” nitori pe o wa ni iwariiri ti Mo ṣe awari rẹ ninu akọle naa . O ṣeun fun ilowosi. Ẹ lati Caracas.