Siyaqhubeka nomjikelo we-CSS kunye nekhowudi ye-HTML enokuthi isebenze kwiwebhusayithi yethu ukuyinika olo hlobo lubalulekileyo lokwahlulahlula kwezinye. Enkosi ku + c ulawulo kunye + v ulawulo esinako Ikhowudi yethu yesandla eya kwenza ukuba iwebhu ilunge ukuba ipapashwe kuphuhliso emva kokuchitha iintsuku okanye iiveki kuvavanyo.
Ngoku lixesha lezilayidi ezingama-27 kwi-HTML kunye ne-CSS eya kusivumela ukuba silungiselele eso sithuba apho sihlala sidibanisa umxholo omninzi kwiiphikseli ezimbalwa ezisisikwere. Ezi zityibilikisi zivela ekhadini, ukuthelekisa, isikrini esigcweleyo, ukuphendula kwaye elula, kodwa kwangaxeshanye intle kakhulu. Sihamba nesilayidi ezingama-27 ezingayi kushiya nabani na ongakhathaliyo, ngakumbi umthengi okanye umsebenzisi odlula kwiwebhusayithi yakho afunde umxholo, athenge imveliso okanye asebenzise isilayidi sokuthelekisa ukuthelekisa umfanekiso ngaphambi nasemva.
Izikrini kumakhadi
Isilayida esinomdla kakhulu kwi-HTML nakwi-CSS ejongene nayo thatha uthotho lwamakhadi kwiwebhusayithi yakho ezidluliswayo ukusuka kwenye ukuya kwenye kunye yoopopayi enesitayile esihle. Ngokuchanekileyo oopopayi kunye negradient yangasemva enika oku kuchukunyiswa kungacacanga kule khowudi ye-HTML kunye ne-CSS ekwavela kancinci kwiJavaScript. Lihle igama elibonisa lo mgangatho wesilayidi.
Isilayidi sekhadi lolwazi
Esi sisilayidi sekhadi lolwazi sikwikhowudi kwi-HTML, CSS nakwiJavaScript. Kungoku malunga uthotho lwamakhadi loo nto ayitsali ingqalelo enkulu yoopopayi, nangona kulula bayo lelona xabiso layo. Esinye isilayidi sokuthathela ingqalelo kolu luhlu.
Uthelekiso lwesilayidi somfanekiso
Esi sisilayidi Iluncedo olukhulu Ngokuqinisekileyo uyibonile kuninzi lweewebhusayithi apho ngaphambi nasemva kweefoto ngokuthelekiswa nebha ethe nkqo ethe tyaba ngokuthe tye. Luncedo olukhulu kuthelekiso, ke siyenzile enye yezinto ezibalulekileyo kolu luhlu lwezilayida.
Thelekisa isilayida ngaphandle kweJavaScript
Umgangatho omkhulu wesilayidi kukuba iza ngaphandle kweJavaScript, ke kuya kufuneka uphumeze ikhowudi ye-CSS kunye ne-HTML kwiwebhusayithi yakho ukuze ube nolunye uthelekiso. Kuya kufuneka usebenzise ibhokisi emnyama emazantsi omfanekiso ukuyilayisha kwelinye icala ukuya kwelinye ukubona ukuthelekiswa kwemifanekiso. Ayisiyonto inomdla njengangaphambili, kodwa iluncedo kakhulu ngaphandle kweJavaScript.
Uluhlu lwesithathu lwesilayidi sokuthelekisa
Igama layo lithetha konke, isilayida somfanekiso ikuvumela ukuba uthelekise ukuya kwisithathu ngexesha. Umzekelo onikiweyo yeyokuba ubone intloko kwiprofayile, enye ukubonisa izihlunu kunye nesinye isilayida ukubona amathambo. Isebenzisa i-HTML, i-CSS kunye neJavaScript ekusebenzeni kwayo.
Isilayidi somfanekiso weVanilla JS
Omnye umfanekiso otyibilikisayo ngeqhosha elikhulu ukuhambisa umfanekiso ukusuka kwelinye icala ukuya kwelinye. Encinci, eneJavaScript encinci kunye nokugqitywa kokubonakalayo okuhle. Enye yezona zibalaseleyo ukuthelekisa imifanekiso.
Yahlula-hlula isikrini ngokuchanekileyo
Este uthelekiso lwesilayidi somfanekiso Yenziwe yi-Envato Tuts kwaye inomahluko wokuba isilayida sibekwe ngokwahlukeneyo ukwenza ezinye iintlobo zovakalelo xa kuthelekiswa imifanekiso emibini. Isebenzisa iJavaScript, i-CSS kunye ne-HTML ukuba ibe sisilayidi sokuthelekisa esikumgangatho ophezulu.
Isilayidi esigcweleyo
Sifikile kwinxalenye yesilayidi esipheleleyo esiza kudibana naso Utshintsho lwesilayidi olubonakaliswa lutshintsho yenziwa ngopopayi olunefuthe elikhulu. Ukuba ucwangcisa ukubonisa imifanekiso kwiscreen esigcweleyo kwaye udlula ngononophelo olukhulu, khowudi kwiJavaScript, CSS nakwi-HTML.
Isilayida esithe tyaba kunye neparallax
Ku abalandeli befuthe leparallax kule slider ngeSwiper.js, HTML kunye neCSS. Ngaphandle kokukwazi ukutyibilika kunye namaqhosha amabini abekwe kwicala ngalinye, kwicala lasekunene sinayo yonke imifanekiso ye-carousel epheleleyo encinci. Isilayidi esibonwayo esahlukileyo nesikumgangatho ophezulu esingayi kushiya nabani na undwendwela iwebhusayithi yethu engenamdla.
Smooth 3D umbono wesilayida
Isilayida esiphendulayo landela iintshukumo zesikhombisi impuku. Iyakwazi ukubangela umphumo omkhulu wombono onokukhokelela kwiimvakalelo ezixubekileyo kwindwendwe. Ukuba uyazi ukuba ungayisebenzisa njani ngokufanelekileyo unokunika olona qhankqalazo luchukumisayo kwiwebhusayithi yethu. IJavaScript, i-CSS kunye nekhowudi ye-HTML ayilahlekanga.
IHero esigcweleyo isilayidi
Isilayidi esigcweleyo somfanekiso wesilayidi kwi-HTML, CSS nakwiJavaScript. Yibane Bounce isiphumo kuyo yonke imifanekiso eshukumayo eyinika oko kwaye ngokubanzi sijamelene nomgangatho esigcweleyo isilayidi njengalo lonke uluhlu.
Isilayida seVELO.JS esinemida
Enye yezona zinto zibalulekileyo njengesilayidi esigcweleyo kunye nopopayi lotshintsho olumnandi. Sicebisa ukuba uye kuyibona isebenza ukuze uqalise ukucinga ngendlela yokuyisebenzisa kwiwebhu. Sebenzisa iziphumo zeVelocity Ukuphucula oopopayi abasebenzisa amaqhosha atolo, cofa kwindawo yokukhangela kunye nokuskrola, ngokugqibeleleyo.
Isityibilikisi esithe nkqo seCSS ngezithonjana
Siqhubekela kwizilayida Ukuphendula kweCSS kwiselfowuni umgangatho omkhulu njengalo. Uya kuba noluhlu lwezithonjana ngasekunene xa ucinezelweyo ukuqala upopayi ngokuwa nkqo. Umphumo omkhulu osebenzisa kuphela i-CSS ukushiya isilayidi sezona zilungileyo kuloluhlu.
Isilayidi somfanekiso weblackbox
Okunye Isilayidi sokuphendula esenziwe ngeJavaScript kwaye ngaphezulu kokulula ukuba yinto entle. Mfutshane, elula kwaye encinci engenanto engaphezulu koku. Inendawo yayo kolu luhlu lweeFlexbox slider.
I-Blur yeMotion kunye neefilitha zeSVG
Uvavanyo olulinganisa isiphumo intshukumo blur lonke ixesha lesilayidi yenziwe yasebenza. Isebenzisa isihluzi se-SVG Gaussian blur kunye nezitshixo zoopopayi zeCSS. Ikhowudi esetyenziswe kwiJavaScript yeyomzekelo onikiweyo kunye nokusebenza kwesilayidi.
Isilayidi esimnyama
Isilayidi esinoopopayi iphendula ngeJavaScript, i-HTML kunye ne-CSS. Sineentolo kwicala lasekunene esivumela ukuba sihambe kwimifanekiso evela kuphiliso oluhle nolumfutshane. Iziphumo ezinkulu ziyafezekiswa kwisilayidi ngasinye ukuze sizimise. Okwangoku kakhulu kwiimifanekiso.
Isilayidi somfanekiso kunye neepateni ze-SVG
Olunye lolo vavanyo oluzama thwala iipateni ze-svg ukwenza imifanekiso yemaski kwisilayidi seCSS. Ivelisa isiphumo esimangalisayo sokufiphala ngokugqiba okukhulu. Omnye wabo batyibilikayo ukucaphukisa iimvakalelo ezilungileyo kwiindwendwe zewebhusayithi yethu.
Isilayidi esilula
Isilayida esingaphezulu kwesinye oopopayi ababalaseleyo enikezela isiphumo sokuhamba kwamaza ngalo lonke ixesha sicofa i icon ukutyibilika umfanekiso omtsha. Yenziwe kwi-HTML, CSS nakwiJavaScript iba sesinye isilayidi somfanekiso.
Isilayidi esinyulu seCSS
Olunye lwezilayida ezilula olucocekileyo iCSS. Enye yeenzuzo zayo ukubeka emazantsi ashiye uthotho lwamachaphaza ezakusebenza njengamaqhosha ukufikelela kumfanekiso ngamnye oza kudlula phambi kwethu ngaphandle kopopayi olukhethekileyo.
Ikhekhe kuphela isilayida seCSS
El isilayidi esimnandi kakhulu kuluhlu kwaye ikwi-CSS kunye ne-HTML kuphela. Le yenye yezona zinto zibaluleke kakhulu kuluhlu lonke ukuba kwicala lasekunene ukwahluka kweekhekhe. Cofa kwenye kwaye ikhekhe libonakale ngoopopayi abamangalisayo abaphelela kwisiphumo esihle sokubhabha. Enye yezona zinto zilungileyo ngaphandle kwamathandabuzo.
Isiphumo sesandi sesilayidi
Esinye sezilayida ezihonjiswe kakhulu kuphiliso kwaye yintoni ikwazile ukusothusa kutshintsho lokuqala. Ukususela kumzuzu wokuqala oopopayi bavela, i-HTML, i-CSS kunye nekhowudi yeJavaScript isishiya simangalisiwe. Enye yezona zinto zibalaseleyo kunxibelelwano oluncinci olunikayo.
Isilayidi sesilayidi
Un isilayidi sokutshintsha esisebenzisa iklasi elula yokongeza kwaye oko kuphawulwa ngoopopayi abagudileyo kakhulu ukuze ube yenye yeentandokazi kolu luhlu. Ukuba ufuna ukwahlula kuhlobo olushukumayo lwewebhu, yenye yezona zinto zibalulekileyo. Idibanisa kakhulu ngokubonakalayo.
Isilayidi iNew York
Enye yeenzuzo ezinkulu zoku Isilayidi esikhubazekileyo kwiCSS kukuba inokwenziwa ngemfuneko kakhulu. Oku kuthetha ukuba unokutshintsha ifonti, ubungakanani bayo, umbala wayo kunye nesantya sopopayi. Ileta yokuqala yesixeko ngasinye kuluhlu olutsha lweJavaScript luvela kwisilayidi esitsha. Enye yezilayida ezixabisekileyo zale post.
Ukuphuma kwesilayidi
Nge isitayile esincinci esibonisiweyo apho icandelo ngalinye lomfanekiso liphuma nesilayidi ngasinye. Kuyile kakhulu kwaye kwahlukile kwinto ebonwa kuluhlu lwezilayida kwaye emi endaweni yayo.
Isilayidi esineziphumo ezibi
Un Iziphumo ezinkulu zesilayidi esigcweleyo ngemibala ethe tyaba ukufumana yonke incindi yayo. IJavaScript, i-HTML kunye ne-CSS yesinye isilayidi esinefuthe lokutsala amehlo.
Isilayida esinomboniso womfanekiso
marbles I-GSAP inomboniso wezilayidi ezilandelayo eya kuziswa kumsebenzisi. Ukugqibelela kwimodeli kwiwebhusayithi yefashoni okanye yoyilo.
Izilayida utshintsho
Siphetha uluhlu nge Isilayidi esikumgangatho ophezulu esinefuthe lokuqhushumba kunye noluhlu lweemifanekiso ezifumana loo nto ekhethekileyo kwiwebhusayithi yethu. Isiphumo se-parallax sinokusebenza.
Ungaphoswa yile Olunye uluhlu lweekhowudi zeCSS amaqhosha.
Intle kakhulu le post, enkosi kakhulu ngokwabelana. Yiya kwiintandokazi ngqo ngokungayeki.
Molweni mlingane.