Siffofin CSS 40 waɗanda ba za a iya ɓacewa akan kowane gidan yanar gizo ba

Fom na shiga

Idan akwai wani abu wanda yawanci sananne ne ga kowane nau'in gidan yanar gizo, waɗannan sune sifofin. Siffofin da muke amfani dasu don cike bayanan tuntuɓar, shigar da bayanan banki, shiga cikin hanyar sadarwar zamantakewa ko kuma kawai yin bincike kamar wanda muke yi kullum a cikin injin binciken Google.

Don haka yau zamu nuna muku Fom 40 a cikin CSS jere daga fom ɗin tuntuɓar, rajistar katin kuɗi, shiga, sauƙi, biyan kuɗi ko ma tabbatarwa. Jerin nau'ikan kyawawan dabi'u da salo don bawa wannan mahimmin ma'anar shafin yanar gizonku, ba tare da la'akari da taken ba.

Fom ɗin tuntuɓar Minimalist

-aramar tsari

Fayil mai sauƙi tare da babban iri-iri na illa kamar alamomin shawagi ko rayarwar layi. Kyakkyawan lambar CSS tare da ɗan JavaScript. Idan kuna neman a fom din lamba kadan Wannan shi ne cikakken a gare ku.

CSS
Labari mai dangantaka:
23 ɗakunan karatu na CSS masu inganci don ƙirar gidan yanar gizo

Imalananan tsari

Karami

Sauran formananan tsari, kodayake a cikin CSS kawai ya zama tsari mai sauki da tasiri. Ba shi da rayayyun abubuwan rayarwa na baya, amma yana da kyau sosai tare da maƙasudin sa.

Fom ɗin tuntuɓar na da

Na da

Fom ɗin tuntuɓar na da, zane mai matukar kyau. Mai amsawa ga waɗancan rukunin yanar gizon a gani daga wayar hannu, kodayake bai hada da inganci ba.

Harafin tuntuɓar wasiƙa

Harafi

Este form lamba yana da kyawawan abubuwan motsa rai: an kafa wasika. Mai sauƙi, amma yana da amfani sosai tare da launi mai yawa.

Santa Cards
Labari mai dangantaka:
27 katunan HTML da CSS kyauta don bulogi, e-kasuwanci da ƙari

Fadada hanyar tuntuba

Contactaramar lambar sadarwa

Este fadada hanyar sadarwa Yana kawai ƙarshen ƙarshen kuma yana da inganci tare da jQuery. Mun danna maɓallin shawagi kuma fom ɗin zai bayyana tare da motsi mai motsi. Fitacce.

Fayil ɗin Saduwa UI

Fom na tuntuɓi

Fayil ɗin Saduwa UI tsari ne da aka yi shi a HTML da CSS. Ya fita waje don kasancewa katin lamba mai sauƙi cewa zamu iya cikewa don kawai filin rubutu yana canza lokacin da aka danna shi.

Wurin biyan kudi

Katin biya na wurin biya

Un wurin biyan kudi sanya a cikin HTML, CSS da JavaScript wanda an rarrabe shi ta hanyar juyawa mai motsi katin bashi lokacin da muka danna kan CVC ko filin lambar tsaro.

Zane mai layin katin bashi

Kyakkyawan katin kuɗi na CSS

CSS mai tsabta don a wurin biya domin katunan kuɗi a launuka masu faɗi. Mai launi kuma mai sauqi qwarai wanda ke iya nuna inganci da kwarewa.

Katin bashi UI

Abun ciye-ciye

Wani katin bashi a cikin HTML, CSS da JavaScript wanda yayi fice don yadda yake da kyau zaba cikakken zane. Mun manta game da rayarwa a cikin wannan lambar lambar don gidan yanar gizon ku. Zazzage shi a wannan mahaɗin.

Amsa wurin biya

Sake amsa

Amsa wurin biya, da aka yi da React.js, an bambanta da gefen hoto za mu iya siffanta shi tare da ayyuka ko samfuran da muke siyarwa a cikin kasuwancin mu na eCommerce.

Katin biya na wurin biya

Popov

Wannan wurin biya ya fita waje don yiwuwar sanya hoto akan katin. A tsari mai sauki kuma mai sauki wanda aka yi shi da CSS3, HTML5 da ɗan jQuery. Kyakkyawan inganci kuma ya bambanta da sauran wuraren biyan kuɗi akan wannan jerin. Zaka iya saukarwa a nan wannan wurin biyan katin.

Biyan katin bashi

stripe

Este takardar biyan kuɗi an tsara shi don yin aiki tare JavaScript don sarrafa DOM. Kuna iya tunawa a cikin ƙirar kyakkyawar lambar Stripe, sabis ɗin banki na dijital da ke kusa da PayPal.

Katin bashi

Daily

Mai ladabi wurin biya don biyan kuɗi daban da sauran kuma bisa katin bashi wanda yake a saman Don haka cewa a ƙasa muna da cikakken nau'i tare da bayanan daban-daban waɗanda abokin ciniki zai cika don yin biyan kuɗi a cikin eCommerce.

Mataki-mataki form

Mataki zuwa mataki

Un mataki mataki mataki don rajista da akayi a HTML, CSS da JavaScript. Matakai huɗu don kowane ɗayan maki dake gefen hagu. An gama rayarwa don cikakke tsari. An ba da shawarar sosai.

Hanyar hulɗa

Mai Mu'amala

Un tsari mai ma'amala Multi-mataki da aka yi tare da HTML, CSS da JavaScript. Ya fita waje don rawanin canji tsakanin kowane matakan. Yana da kyakkyawar taɓawa wacce ba za a iya lura da ita ba.

Mataki-mataki form

Mataki zuwa mataki

Este mataki mataki mataki ya fito waje don ya zama mai kirkira. Za ku amsa tambayoyin ta yadda za ku iya komawa gare su a kowane lokaci ta hanyar kasancewa a gaban allo koyaushe.

Mataki zuwa mataki

Paso

Mataki-mataki form yi a cikin HTML, CSS da JavaScript. An bayyana shi da rayarwar canji tsakanin kowane matakan.

Multi mataki Jquery form

JQuery Multi mataki

Idan kana da tsari mai tsayi sosai, wannan cikakke ne ga sassa daban-daban tare da mashaya ci gaba mai ban mamaki. Dangane da jQuery da CSS, ya yi fice don ƙirarsa da kuma kyakkyawa mai kyau.

Fom ɗin motsa jiki na UI

Fim ɗin motsa rai

Canjin wannan Fom ɗin motsa jiki na UI suna dangane da Domink Marskusic. Hankali ga tasirin kirkirar akwatin shudi lokacin da muka danna kan wasu daga cikin shiga ko filayen zaman biyu.

Creationirƙirar lissafi / hanyar shiga

Shiga Halitta

A gimmick shiga da kuma ƙirƙirar asusu wanda ya danganci tashin hankali abin da ke faruwa tsakanin waɗancan sassan biyu. Halin yanzu da mai ban mamaki da za a yi a cikin HTML, JavaScript da CSS.

Macijin Maciji

Snake

Macijin Maciji shine ɗayan mafi kyawun shiga kowane jerin waɗannan ya fito waje don kyawawan rayarwa hakan yana faruwa da sauri lokacin da muka danna ɗayan filayen biyu.

Allon shiga

Shiga

Allahntaka wannan zane allon shiga haka ma nasu rayarwa da yadda yake kirkira. Idan kana son zama mafi halin yanzu idan yazo da ƙirar gidan yanar gizo, wannan fom ba zai rasa ba. Ba makawa.

Shiga zane UI

Fom na shiga

An tsara ta ta amfani da HTML, Sass, da jQuery. Shiga zane UI es ehalattacce kuma bayyananne akan batun da ba rasa rayayyun rayarwa don zama ɗayan waɗanda aka fi so akan jerin.

Shiga ciki da ƙirƙirar asusun UI

Rijistar shiga

Musamman Tsarin shiga da ƙirƙirar asusun UI  don launuka da gabatarwa a ciki babban kati ɗaya sassan biyu. Wani daga cikin kyawawan kyawawa a cikin kisan wanda ba za mu iya rasa shi ba. An yi shi a cikin HTML, CSS da JavaScript.

Kurakurai masu ban tsoro

Rashin hankali

Kurakurai masu ban tsoro Babban shiga ne saboda tashin hankali na filaye da abubuwan banƙyama. Asali don zama mai ban dariya, rashin kulawa da shiga daban. Asali ba tare da wata shakka ba ga rukunin yanar gizon mu.

Shiga CSS HTML

CSS

Shiga ciki ta gumaka daban-daban wannan yana nuna kowane filin don ɗaukar baƙo a duk inda muke so. Inuwar da aka zaɓa a cikin launuka kuma suna tsayawa. Bata da wani motsi. Ana yin shi a cikin HTML da CSS don aiwatar dashi akan rukunin yanar gizon abokin ciniki ko namu.

Yanayin shiga Modal

Modal

Este Yanayin shiga Modal an yi wahayi zuwa gare ta da harshen na ƙirar da aka sani da Tsarin Kayan. Mun gan shi a yawancin aikace-aikacen akan na'urorin hannu. A cikin wannan lambar muna da allon shiga da rukunin rajista wanda ke ɓoye ta tsoho. Za'a iya kunna rukunin rajista ta danna kan layin shudi wanda yake gefen dama. Yana da babban raye-raye don kasancewa babbar mahimmiyar shiga.

Form lankwasa

Flexbox

Muna fara siffofin bincike da wannan nau'i dangane da lankwasawa. Ya fita waje don jan launi na «binciken» kuma kaɗan don filin bincike mai kyau don gidan yanar gizonku.

Akwatin mai rai

Akwatin mai rai

Tare da wannan akwatin mai rai danna gunkin kara girman gilashi kuma wani shuɗi mai haske zai bayyana don haka kawai zamu buga binciken da za mu gudanar akan gidan yanar gizon. Anyi shi da HTML, CSS da JavaScript.

Filin bincike

Tura bincike

Una babban layi yana gudana a kan allo ta yadda idan muka matsa sai mu fara buga bincike. Maballin ɗaukar hoto don ayyana wannan form mai sauki.

Filin bincike mai sauƙi danna kan

Waze

Filin bincike mai sauƙi danna kan ya dogara ne akan hulɗar da aka gani a Waze Driver Community App abin hawa. Duk gumaka da hotuna an yi su da CSS. Ya yi fice ga waɗancan gumakan da ke ba mu damar aiwatar da takamaiman bincike na samfur ko sabis. Buguwa saboda yadda yake da sanyi.

Sakamakon shigar da rubutu na CSS

Shigar da CSS

Sakamakon shigar da rubutu na CSS ya hada da jerin rayarwa a cikin rubutu da aljihun tebur zama mai neman hankali cikin tsari.

Cikakken binciken allo

Cikakken binciken allo

Wannan shigar daga cikakken binciken allo yana aiki da kowane irin tsari ko matsayi. Yana buƙatar salo takamaiman akwati da kayan bincike da za a kasance a cikin tushen. Yana da halin tashin hankali lokacin da muke latsa maɓallin bincike.

Binciken

Binciken

Un hanyar nema sauki cewa yana son yin wasa da matsayi daban-daban da rayarwa. Muna danna maɓallin bincike kuma cikakken aljihun tebur ya bayyana don buga kalmomin. Na yanzu kuma ana ba da shawarar sosai yadda sauki yake.

Babu tambayoyi

Babu tambayoyi

Babu tambaya es m tsari tare da filin rubutu kuma zaɓi don zaɓar wasu amsoshi ga mai amfani don zaɓar su. Babban yarjejeniyar gani ya zama ɗayan mafi kyau.

Fom ɗin biyan kuɗi

Labarai

Tare da wannan fam na biyan kuɗi, mun danna maballin iyo kuma zai dauke mu zuwa tsari tare da sauti mai ban dariya da kuma filin da za a shigar da imel. Cikakke don tallan imel.

Akwatin shiga UI

Biyan kuɗi

Una akwatin biyan kuɗi tare da kararrawar kararrawa kuma kadan fiye da launuka masu launi A cikin zane.

CSS akwatin biyan kuɗi

Biyan kuɗi

Una akwatin biyan kuɗi mai kaifin baki don gaskiyar yi amfani da gradients don maɓallin biyan kuɗi kamar launin shuɗi mai duhu na filin.

Akwatin shiga

Akwatin shiga

Una akwatin biyan kuɗi mai sauƙi amma babban sakamako ta zane.

EMOJI form na inganci

emoji

A cikin tsarki CSS wannan fam na inganci don ƙirƙirar mabuɗin ko kalmar wucewa. Yayin da muke rubutu, emoji zai auna matakin tsaro na fom. Abin dariya da sha'awa ba tare da wata shakka ba.

Kada ku rasa wannan jerin kibiyoyi masu rai guda 23 a cikin CSS.


Bar tsokaci

Your email address ba za a buga. Bukata filayen suna alama da *

*

*

  1. Wanda ke da alhakin bayanan: Miguel Ángel Gatón
  2. Manufar bayanan: Sarrafa SPAM, sarrafa sharhi.
  3. Halacci: Yarda da yarda
  4. Sadarwar bayanan: Ba za a sanar da wasu bayanan ga wasu kamfanoni ba sai ta hanyar wajibcin doka.
  5. Ajiye bayanai: Bayanin yanar gizo wanda Occentus Networks (EU) suka dauki nauyi
  6. Hakkoki: A kowane lokaci zaka iyakance, dawo da share bayanan ka.

  1.   Hoton Juan Jose Perez m

    Kyakkyawan samfurin misalai da aka gabatar anan. Bambance-bambancen da daidaitawa zuwa ma'anoni daban-daban kuma mafi kyawun abu shine cewa mahaɗin kowane taken ya haɗa da demo da lambar tushe duk da cewa yakamata ku haskaka shi da maɓallin «Duba demo» saboda ba don son sani ba na gano shi a cikin taken . Godiya ga gudummawar. Gaisuwa daga Caracas.

  2.   Rudolph Gallegos m

    Ya taimake ni da yawa, na gode.