27 katunan HTML da CSS kyauta don bulogi, e-kasuwanci da ƙari

Albarkatun kan layi kusan basu da iyaka, amma nemo su da inganci abu ne mai wahalar gaskeKodayake bincika ɗan kuma samun kyakkyawan jerin rukunin yanar gizon sadaukarwa don tsarawa, abubuwa sun zama masu sauƙi. A lokacin da harsuna kamar HTML da CSS suke cikin yanayi mai kyau, kusanci da kyauta, albarkatu masu inganci kusan kusan 'yan dannawa suke.

Za mu jera jerin katunan kyauta a cikin HTML da CSS wadanda suka dace da kowane nau'in blog, kasuwanci, kasuwancin intanet da ƙari. Collectionaukar dogon zango don a saka shi cikin wasu ayyukan da kuke yi don kowane nau'in kwastomomi. Bari muyi shi tare da wannan jeren wanda ke amfani da codepen.io domin ku sami lambar a cikin HTML da CSS.

Katin Blog nishadi # 1

Una babban katin zane wannan yana cewa kusan komai hoton da yake wakiltar shi, zaku iya zuwa codepen.io don samun lambar da ta dace kuma girka ta akan gidan yanar gizon ku.

CSS News Cards kawai CSS

Wannan katin, tare da Baƙo Abubuwa azaman bango, yana tsaye don rawanin sanyin kansa wanda ke bayyana abubuwan da ke ciki. Yana da tsarkakakkun CSS.

Blog Post Abun

Siffar yanar gizo ta hanyar kawo alamar linzamin kwamfuta a kanta. Yana da CSS da HTML don sauƙin haɗawa

Katunan bulogi

Tsarin zane mai amfani da shafin yanar gizo. Azumi da santsi rayarwa na babban inganci wanda bai bar kowa ba.

Katunan kasuwanci masu amsawa

Ya tsaya waje don da kadan tashin hankali ta hanyar nuna alamar linzamin kwamfuta akan hoton katin.

Wani katin yanar gizo

Bayyanar da katin rubutu yayin shawagi a cikin wannan.

Katin kasuwanci

Una sauki amma katin yanzu ziyarci tare da demo da lambar a cikin HTML da CSS.

3D katin kasuwanci

Wannan katin yana da daraja 3D animation tare da HTML da CSS. Wanda Elena Nazarova tayi, yayi daidai da katin kasuwanci mai dauke da launi.

Katin kasuwancin CSS

Katin kasuwancin CSS mai daukar hankali sosai juya cikin 3D don samar da hanya don jerin adiresoshin URL waɗanda ke amsa madogara ta linzamin kwamfuta a lokacin da muka sanya shi ƙasa.

Rukunin katin

Jerin katunan da aka sanya su da kyau tare da zane mai daukar hankali. Abin mamaki ne game da sauƙin fasahar sa, amma tare da kyakkyawar nasara a cikin HTML, CSS da lambar SCSS.

Ana bayyana katunan 3D

Wannan jerin grids na katin bayyana ƙarin bayani a halin yanzu cewa mun bar linzamin kwamfuta akan gunkin a cikin kore. A lokaci guda mun bar maɓallin, sauran grid ɗin yana motsawa daidai.

Katin Kayan Kayan Kira

Tare da Harshen zane na google, wannan jerin katunan sun bayyana waɗanda suka yi fice don gunkin menu wanda ya buɗe duk bayanan yan wasan kamar yadda yake a cikin misalin. Kyawawan ra'ayoyi da ilhama tare da babban gani na gani.

Grid din katin lankwasawa

Samfurin katin a daidai wannan tsayi da suka fice don amfani da madaidaicin tsarin lankwasawa. Wani ƙimar sa shine amfani da yanayin yanayin CSS da matatun CSS.

Karo na Clans Cards

El shahararren wasan wayar hannu yana da katunansa a cikin HTML da CSS wanda Andre Madarang ya ƙirƙira. Zamu iya wucewa tsakanin su tare da madaidaiciyar kuma rawan gani sosai.

Katunan faifai don eCommerce

Tare da tashin hankali, waɗannan katunan suna ƙarfafa ku don bincika abubuwan su don gano abin da suke ciki. Tare da babban zane daga Omar Dsoky.

Tsararan Tsarke - Katin Samfur

Cikakken kati don tsara waɗanda samfurin mu eCommerce. Anyi a HTML da CSS

Katin samfur

Daga wannan katin zamu iya wuce hotuna da yawa don ganin samfurin. Ya haɗa da ƙarawa zuwa maɓallin kaya kuma ya ƙunshi HTML, CSS da lambar JavaScript.

Katunan Samfurin Flexy

Kamar yadda sunansa ya nuna, yana amfani da lankwasawa don ƙirƙirar rayarwa mai ban sha'awa lokacin da muka danna maballin kara zuwa keken.

Katunan kati

Codearamin lamba ga wasu katunan tare da santsi kuma cikakken animation. A cikin 'yan mintuna za ku iya haɗa su. Kwanan nan aka ƙara shi zuwa codepen.

Katunan azaman Katinan Samfuran 3D

Ya kamata a lura cewa waɗannan katunan suna kamar muna da jerin katuna a kan tebur. An bar maɓallin yana hutawa kuma suna zuƙowa, danna kowane ɗayan, kuma su nuna bayan katin don nuna bayanan samfurin. Mun sake dannawa kuma mun barshi yadda yake tare da gaba. Cikakke don koyon kaddarorin 3D CSS.

Parallax Katin

Gwajin gani sosai tare da tasirin juyewar ido mai daukar ido. Zai fi kyau ka ganshi ka san me yake magana akai.

Tsayar da sakamako don katunan

Tasiri mai sauki amma gimmicky tsafta game da katunan.

Sakamakon sakamako mai sauƙi

Bugun sakamako mai sauki, amma hakan na da tasiri sosai a wannan lokacin da muke hango shi.

Parallax Zurfin Katinan

Waɗannan katunan suna ɗauke da bayanin parallax zuwa saman don ƙirƙirar wasu katunan ban mamaki ta ƙira. Dole ne kawai ku gan shi don ƙarin fahimtar tasirin da yake samarwa ga mai amfani lokacin da kuka zaɓi wasu rukunan a cikin shafinmu.

Katin UI don fina-finai

Katin na babban layout sanya tare da HTML da CSS.

Katin bayanin martaba

Muy mai kyau rayarwa don katin lamba wanda zamu iya aiwatar da damar yin amfani da bayanan martaba na kafofin watsa labarun. HTML da CSS.

Polaroid katunan katunan

Tare da kaddarorin, masu tacewa da CSS miƙa mulki Wannan jerin katunan rukunin Polaroid an kirkiresu; kar a rasa waɗannan hotunan SVG yanar gizo.