23 kibiyoyi masu rai a cikin CSS don rukunin yanar gizonku

Za mu ci gaba da wani zagayen labaran da muka sa a ciki lafazin akan waɗancan abubuwan da zamu iya samun su kyauta daga yanar gizo kamar codepen.io. Shafukan da ke da darajar gaske don ɗaukar lambar a cikin CSS, HTML ko JavaScript, kuma don haka yana haifar da kyakkyawan sakamako a cikin yanayin gani na gidan yanar gizo; gidan yanar gizon da zamu gabatar da shi zuwa wasu manufofi tare da aiwatar da ingantaccen tsarin lambobi da kuma dabaru masu ban sha'awa.

Waɗannan su ne 23 kiban CSS masu rai waɗanda suke cikakke ga waɗancan abubuwan da ke karkatar da duban mai amfani wanda ke niyyar wucewa gaban ƙungiyar aikin X, ko zuwa sararin samaniya inda za a iya siyan siyen a cikin eCommerce; kibiyoyi masu mahimmanci don iya ƙirƙirar funnels kuma don haka sami babban jujjuyawar wannan samfurin da muke siyarwa a cikin kasuwancin mu na eCommerce.

Kibau CSS masu rai

Arrows CSS mai rai tare da gungurawar gefe waxanda sune samfurin farko na kibiyoyin CSS masu rai a cikin wannan jerin na 23. Tasiri mai sauƙi ga wasu kibiyoyi tare da babban sakamakon gani kuma hakan baya wuce abin da aka faɗa.

Kibiya mai rai

Una kibiya a cikin svg wannan zai sami isasshen animation mai inganci yayin da muke nuna maɓallin linzamin kwamfuta akan sa. A cikin madauwari motsi za mu haskaka wannan mahimman rukunin yanar gizon don rukunin yanar gizo da yawa.

Kiyon kibiya

An animation a cikin CSS da HTML wanda ya ƙunshi canji mai sauƙi na kibiya mafi zamani zuwa mafi classic. Babu wani abu kamar wannan rayarwa don kibiya tare da kyakkyawan ƙare kuma mai sauƙi.

Kibiya rayarwa

Jerin kibiyoyi masu rai a cikin matsayi da motsi daban-daban. Motsi ne a kaikaice don kibiyoyi waɗanda suka ƙunshi "shaƙatawa" wanda ke ba da haske ga sararin da kibiyar ke ɗauka akan gidan yanar gizon.

Kibiyar mahada

A da'irar da'ira lokacin da muka bar ma'anar linzamin kwamfuta akan wannan gunkin. Wani raye-raye mai sauƙi mai sauƙi da aka yi, amma tare da babban tasiri kamar sauran da muke rabawa daga wannan shigarwar a ciki Creativos Online.

Rawar sau uku

Dangane da hoton SVG, a nan kuna da jerin rukunin yanar gizon da aka keɓe don irin wannan tsarin hoton, a animation sau uku yana haifar da duka zama uku kibiyoyi na farko a cikin guda daya kawai. Wani babban sakamako ga gidan yanar gizonku wanda ke ba shi ƙwararren taɓawa.

Sauƙi CSS mai sauƙi zuwa saman

Wannan Kibiya mai sauƙi a cikin CSS yana da aikin dawowa farkon shafin yanar gizon. Gimmicky yana juyawa tare da farawa da saurin gudu wanda ke sanya rai mai sauƙi da sauƙi a kallon farko, kodayake koyaushe yana bawa ƙwararren taɓawa kamar na baya.

Kibiya na roba

Wannan roba mai baka sananne ne saboda gaskiyar cewa lokacin da ka danna ko ka latsa shi, za a ƙirƙiri sakamako mai ɗorewa a cikin faɗin inda gunkin yake. Dole ne mu gane cewa kibiya ce wacce ta dogara da JavaScript.

Arrow SVG tare da tashin hankali

Kibiyar SVG da ke jiranka bar mai nunawa ƙasa Don tasirin sauyawa ya bayyana kuma launi ya canza zuwa ja, aƙalla wanda aka bayar a misali, to zai zama batun keɓance shi zuwa ga abin da muke so da zaɓinmu.

CSS Chevron Kibiyoyi

Kyakkyawan kibiya CSS mai sauƙi lokacin lankwasa kanta tare da canjin launi. A na mafi m kibiyoyi, amma saboda babu rashin inganci kuma hakan ana tsammanin taɓawa kamar sauran mutane.

Kibiyar svg

Sakamakon canji a cikin nauyi ko «auna» na gunkin, a wannan yanayin kibiya a matsayin jarumar wannan shigarwar. Kuna kawai ƙara nauyin kibiya tare da kyakkyawan tasirin tushen CSS.

Arrow

Un gwajin kibiya wanda a ciki zamu sami kyawawan nau'ikan su tare da keɓaɓɓiyar halittar da aka halicce ta da sihiri da abubuwan ƙira.

Kibiyoyin CSS masu tsabta

Sauran nau'in kibiyoyi waɗanda suke wadatawa jerin, kodayake anan zamu iya fitowa daban banda kirkirarmu a cikin CSS da HTML.

Kibiya CSS mai lankwasa

Idan kanaso ka bayar wani lankwasa sakamako kamar an zana shi a hannu, wannan kibiya a cikin CSS ta dace da wannan manufar.

Arrow

Kibiya tare da canzawar CSS wanda ke cimma nasarar lalacewar tasirin kibiya a cikin hotuna da yawa waɗanda suka zana hoton abin tambaya.

Kibiyoyi uku a daya

A m tashin hankali to sarrafa juya kibiyoyi uku zuwa ɗaya. Wani ɗayan waɗannan tasirin da za mu iya nema kuma muna da lambar sa don muyi amfani da shi yadda muke so a cikin aikin mu ko gidan yanar gizon mu.

Kyakkyawan motsawar motsawar CSS

An animation a cikin iyaka yanayin na jerin kibiyoyi waɗanda ke bawa ɗayan damar wucewa don ɗaukar matakin tsakiya yayin da suka kasance mafi girma. Tare da gamawa sosai, ya zama kyakkyawan kibiya don ƙarfafa ka ka bi shugabanci akan yanar gizo.

SCSS tashin hankali

Sauran kyawawan abubuwa marasa iyaka marasa motsi kuma wanda ke da lalacewa don samar da hanya don wata kibiya kuma ta haka ne samun "madauki" na musamman.

Rawar kibiya mai guba

Daga duk rayarwar da aka gani a cikin wannan jerin kibiyar, babu shakka mafi ban sha'awa da kuma mafi m. Motsi wanda kusan yana wucewa ta inda yake zagaye tsaye. An ba da shawarar sosai don barin mai amfani da mamakin wanda ya zo gidan yanar gizonku.

Animation zuwa karshen

Wannan motsi, kamar waɗanda suka gabata, yana da ga mai amfani a ƙarshen gidan yanar gizon saboda haka ya wuce zuwa kafa. Yana da halin kerawa mai motsawa wacce ke sa ta fice daga sauran. Zai fi kyau cewa kun gan shi a aikace daga hanyar haɗin zuwa codepen.io.

Arrow mai sauki gunki

Gunki wanda kamar yadda aka nuna mai sauqi ne kuma wancan Ya ƙunshi mai sauki animation. Wannan baya nufin muna fuskantar kodin inganci kamar wanda Joshua MacDonald ya raba.

Bouncing Kibiyar Kiwo

Wata kibiya tare da billa tashin hankali a cikin HTML da CSS wannan yana ƙoƙari ya bambanta da sauran. Tabbas kun samo shi daga demo kuma zazzage hanyar haɗin.

Kiyon kibiya

Wani tashin hankali don kibiya a cikin CSS da HTML cewa yana da kyau «koma». Ita ce mafi girman dukiyarta wajen rarrabe ta da sauran jerin jerin kibiyoyin CSS 23 don gidan yanar gizon ku.