35 ezinye iziphumo zombhalo zeCSS kwiwebhusayithi yakho

Sele sipapashe kwiiveki ezimbalwa ezidlulileyo uthotho lweempembelelo zombhalo zeCSS ze ukuphucula ukuboniswa kwesihloko se-H2 yemveliso okanye isihloko sokungena kwenkonzo ethengiswa kwiwebhusayithi yomthengi. Iziphumo zombhalo zeCSS ezikwaziyo ukunika inqanaba lomgangatho esijonge kuwo ukuze sibonise umdla kumthengi kwaye anazo kwiphothifoliyo yakhe ixesha elide.

Sibuya nolunye uluhlu olukhulu lweempembelelo zombhalo zeCSS ezinikezelwe ngokukodwa ukubonisa iwebhusayithi ngendlela ebalaseleyo. imveliso, inkonzo, iphepha lokufika okanye olunye uhlobo lomxholo. Iziphumo zombhalo ezingama-35 ongenakuphulukana nazo ukubonisa ukuba uyilo lwewebhu namhlanje lukwelona nqanaba liphezulu kwaye asinakuphuthelwa kuloliwe ukuze siqhubeke nobuhle be-aesthetics.

Cwaka isiphumo sombhalo bhanyabhanya

Isiphumo sokubhaliweyo esithile esiboniswe njengesigqibeleleyo sodidi oluthile lomxholo. Kwicatshulwa kungaboniswa ukuyenza icace gca into yokuba sinikela ingqalelo kuyilo lwewebhusayithi yethu okanye leyo yomthengi.

Ukungeniswa kokubhaliweyo kweCSS

Oku kungeniswa kokubhaliweyo kwe-CSS kuzama ukwenza ngokungathi kunjalo Imfihlo yesitshixo. Indlela ebabazekayo yokubonisa isicatshulwa kwiwebhusayithi ezinikezelwe kwisihloko esithile.

Cassie

Omnye oopopayi kwi-svg Oko kuthetha ubunzima obuncinci kunikezelo lwesicatshulwa esenziwe ngemibala eliqela. Kubetha ubukho beli tekisi elisebenzisa iJavaScript ukunika uphawu ngokupheleleyo.

Umbhalo wesithunzi ophilayo

Okubhaliweyo kwesithunzi sopopayi kunento ethile ekhethekileyo yokuthinta eyahlukileyo kunalo lonke ungeniso kuluhlu. Apha silibele iJavaScript ukuba ingeniswe ngaphandle kwekhowudi yeCSS.

Umbhalo weMorph

Isicatshulwa esinoopopayi kwiJavaScript nakwiCSS iguqula ngokujikeleza ngemibala ethile ye-neon. Kwiiwebhusayithi apho umbala ongasemva umnyama okanye ungwevu. Oopopayi abagudileyo kakhulu kwisiphumo sokubhaliweyo esahlukileyo.

Yahlula isiqabu sombhalo

Okubhaliweyo kuyekisiwe kwasebenza bonisa kwindawo oopopayi abatyebe kakhulu. Ikwanayo neJavaScript. Unqakrazo olunye unokubona oopopayi baphunyezwa kwisiphumo sokubhaliweyo esinomdla kakhulu.

Oopopayi bamaza

Oopopayi be-Wave ngaphakathi kokubhaliweyo kunye ne-SVG. Elinye lawona manqaku anomdla woku Isiphumo sokubhaliweyo sikumfanekiso ongasemva kunye negradient egcwalisa iliza ukuze ibonakale kakuhle.

Umbhalo we-warp oopopayi

Isuntswana leJavaScript liphumeza isiphumo sokubhaliweyo apho unobumba ngamnye unexabiso elilingana naye Ke kujongeka ngathi yenziwe ngezincamathelisi zoonobumba ezahlukeneyo. Iziphumo ezintle zombhalo wokuyila kwinkcazo-ntetho.

Umphumo womsi

Umphumo omkhulu womsi wokubhaliweyo iyanyamalala ngokuthe ngcembe ukunyamalala ngokupheleleyo. Ingasetyenziselwa ukubetha okanye ukucofa kwaye itekisi ibonakale ngumphunga phambi kwethu. Akukho JavaScript kunye nekhowudi encinci yeCSS.

Isiphumo seblue

Iziphumo zombhalo wejQuery esibonisa indlela yokuyila Iziphumo zeblue kwintloko kwi-HTML. Iziphumo kukwenza amaqamza avele ngasemva kokubhaliweyo ngokungathi ngamanzi abengezelayo. Ukubetha kakhulu.

Umbhalo wokugcwalisa oopopayi

Isiphumo sombhalo eshukumayo esigcwalisa ifonti kunye nomfanekiso ongasemva. Ayifuni JavaScript kwaye isebenza kuphela ngekhowudi yeCSS. Oopopayi abacothayo kwaye abagudileyo kwisicatshulwa esiya kuthi sigqibelele kwimixholo ethile yewebhusayithi.

Umbhalo oopopayi kwiCSS nakwi-HTML

Umbhalo oopopayi olula kwiCSS nakwi-HTML eyenza ifayile ye- amagama awela nkqo ukusuka phezulu. Silibale malunga neJavaScript apha ukugqibezela oopopayi ngqo kwaye ilula ngaphandle kokugoba okuninzi.

Ukuzoba okubhaliweyo ngombala

Apha isicatshulwa sizotywe kunye umphumo wombala oqaqambe kakhulu kwaye loo nto inokunika inqaku kwimicimbi enxulumene nokufikisa okanye ulutsha. Ekugqibeleni ayinanto, ngelixa ifonti ihanjiswa ngothotho lweethoni ezinamandla.

Isicatshulwa esinyanzelisiweyo kwi-SVG

Oopopayi nje umzuzwana omnye uya kuwo wonke umzobo oonobumba be-animated kwi-SVG. Inekhowudi encinci yeJavaScript yokuhamba kunye neCSS kunye ne-HTML.

Umbhalo wesithunzi

Isithunzi salo mbhalo sivelisa i ukusebenza nzulu ngemibala eqaqambileyo ephantse yabonakala ngathi yivenkile ethengisa ukutya. Isiphene kuphela kukuba ayilungiswanga kwizixhobo eziphathwayo.

Montserat

Oopopayi kwiCSS kunye ne-HTML ezibonisa ubuqambi bayo kunye nezinye imibala esusela kumbala otyheli nobomvu. Ukusetyenziswa okumiselwe bubodwa boopopayi bayo bezo mibala zihamba ngokuzoba okubhaliweyo.

Isiphumo sokuqhuma

Iziphumo zombhalo ze Iqhume kwiziqwenga ezininzi ukuba singacotha ngokushiya isikhombisi semouse sihamba ngonobumba ngamnye owenza igama. Ukutsala amehlo, umgangatho ophezulu wokubhaliweyo osebenzisa i-HTML, i-CSS kunye neJavaScript.

Isiphumo sokubhaliweyo kwamaza

Ngaphandle kweJavaScript, isiphumo sokubhaliweyo esilawulayo siyakwazi ukubeka oopopayi ngokwenene ihambisa umfanekiso ongasemva ngokuzoba igama. Ukuqhayisa ngaphandle kwamathandabuzo kunye nefuthe elikhulu.

Oopopayi be-GSAP

Njengakwimiboniso bhanyabhanya emininzi, zonke iileta ezenza umhlathi ziya kuvela kuyo yonke indawo ukuze ekugqibeleni zenze izivakalisi ngempembelelo enkulu yoopopayi. Igudile kakhulu kwesinye seziphumo ze okubhaliweyo okutsala amehlo kunye nomgangatho ophezulu kuluhlu lonke. Kubalulekile ukuyigcina engqondweni kwiindidi ezithile zemisebenzi yabathengi.

Umbala ophilileyo wokubhaliweyo

Omnye ukucotha kunye nokuhambisa amanzi yombala kwisicatshulwa esikwaziyo ukwenza umyinge. Nangona ine-JavaScript encinci, ikakhulu isekwe kwi-SCSS. Enye yeempembelelo ezifihlakeleyo, kodwa oko kubonisa ukuphakama kokwazi indlela yokuyikhetha kwiwebhu. Ayizukungabonakali.

Isiphumo sokubhaliweyo esingenakwenzeka

El ibhokisi ebomvu ejikeleze isicatshulwa iyaziphendulela ngesiphumo somthunzi esigubungela igama okanye ibinzana. Inomtsalane kakhulu kwaye inomdla omkhulu wokugubungela ukungena okanye i-header yewebhu ngobuhle.

Isicatshulwa esimibala-bala sigcwalisa nge-SVG

Imulticolor gcwalisa oopopayi enikezelwa njengenye yezo Iziphumo zombhalo ezivelayo ngokwayo. Ikhethekile kuluhlu kwaye inezo zinto zichukumisayo zebombastic eziza kubangela uvakalelo kubakhenkethi bewebhu. Ukuba uyakwazi ukubeka, uya kunika inqaku.

Isicatshulwa esinyanzelisiweyo kwi-SVG

Njengokuba indlela eya kuye yayipunyiwe Umzobo oqaqambileyo wombhalo weSVG. Enye yezona zinto zinomdla kakhulu kuloluhlu kwaye zibekwe kwindawo yazo ukuzichonga ngokugqibeleleyo.

Umbhalo we-Glitch

Oku kubhaliweyo kwiJavaScript, CSS kunye ne-HTML kunokuba yiyo Ukuchukumisa okhethekileyo kwearhente yentengiso ukunika inqaku ngegama lesivakalisi. Iziphumo ziyakhuthaza kwaye zitsalela ingqalelo kulundwendwe.

Umbhalo we-Glitch

Njengokuba bekukho ukuphazamiseka kumqondiso wokuba zoba isicatshulwa okanye usibonise, Esi siphumo sombhalo sisiphelo esihle. Isinye ngaphandle kwamathandabuzo kwaye siyazibonakalisa. Yenziwe nge-HTML (pug) kunye neCSS (SCSS).

Glitch isicatshulwa SCSS

Esinye isicatshulwa se-glitch esinokuphazamiseka indawo yakho eya kuyifumana kwiwebhusayithi ethile ngenxa yomxholo, ngokuqinisekileyo ezinxulumene neentsomi zesayensi.

Umbhalo wokuhambisa phezulu 

Okwangoku sibeka isikhombisi ngaphezulu kwesicatshulwa, oku kuya kuba luhlobo lwe-crosshairs oko kuyasivumela ukuba sihambise unobumba ngamnye ukuze sijolise kuyo, kuba ezinye ziya kuba ngaphandle kokujongwa. I-HTML, i-CSS kunye neJavaScript yesiphumo sokubhaliweyo esikhethekileyo.

Ukuhambisa isicatshulwa ngokwembono

Xa sibeka Isalathiso se mouse ngapha kokubhaliweyo, iya kuhamba ngombono onomdla ohambisa isiphumo se-3D.

Isicatshulwa esigqamileyo sopopayi

Isikhombisi semouse siza kugxininisa isicatshulwa njenge ukuba beyiza kukotshwa okanye kusikwe. Iziphumo zombhalo owela phezulu ukufihla onke amagama akwisiqendu. Ngaphandle kweJavaScript kunye neCSS.

Isicatshulwa esimnandi

Iziphumo zombhalo Ndonwabile ukuba iya kubetha side sibeke isikhombisi semouse kwezinye iileta. Iziphumo zibangelwe kukutsiba kwabanye ukubizwa njalo. Ngaphandle kweJavaScript kunye neCSS.

Umbhalo we3D ekwakhiweni

Esinye isiphumo sokubhaliweyo se-3D se hamba uyila amagama ahlukileyo koonobumba bonke eziza kuvela ngokudibeneyo zisondeziwe ukusuka ngaphandle ukuya ngaphakathi. Iziphumo ezinkulu kunye nokubonwayo kunye nokuboniswa. Enye icetyisiwe kuluhlu.

Isicatshulwa esinyulu seCSS kwisithunzi

Iziphumo zombhalo kwi-CSS emsulwarovoke isithunzi sesiphumo esihle kunye nesimbo esihle. Ayinakuphikiswa kwaye enye yezona zinto zibalulekileyo kuluhlu. Akukho popayi, kodwa iyakhazimla.

Isithunzi esihle

Iziphumo zesithunzi ezibonakala zintle ngokwenene. Ukugqibelela kwamaphepha okufika okanye iiwebhusayithi zokhathalelo lwemini. I-CSS emsulwa ukuzimela yodwa.

Isithunzi sesibini

Omnye umphumo omkhulu wesithunzi kwi I-HTML kunye ne-CSS ebonakalayo iyodwa. Isithunzi kwimigca senza ubuhle obukhulu kwiiwebhusayithi ezithile ezinomxholo.

IParallax Shadow

Siphelisa uluhlu olunye yezona mpembelelo zihle kakhulu kwi-parallax isithunzi esenziwe ngumbhalo. Sidlulisa isikhombisi semouse kwaye siye ngasekunene, kokukhona kuya kubonakala isithunzi. Ibhalwe nguRact, ES6 kunye neBhabheli.

Unolunye uluhlu lwe Iziphumo zombhalo apha.