Iisilayidi ezingama-27 ze-HTML kunye ne-CSS ukunika iwebhusayithi yakho olo chukumiso lukhethekileyo

Isilayidi sekhekhe

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

ukukhwela

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

Isilayidi esineenkcukacha

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

Isilayidi sokuthelekisa

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

Thelekisa isilayida ngaphandle kweJS

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

Isilayidi esithathu somaleko

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

Isilayidi sokuthelekisa

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

Isilayidi esithelekisayo sediagonal

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

Isilayidi sotshintsho

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

Isilayidi separallax

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

Umbono we-3D isilayidi esigudileyo

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 somfanekiso weHero

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

Imiphetho yesigqubuthelo sesilayida

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

Isilayida esiphendulayo seCSS

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

Isilayidi somfanekiso weFlexbox

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

Ukuhamba kweslider blur

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 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

Isilayida kuphela i-CSS 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

Uluhlu lwesilayidi

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

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

Ikhekhe lesilayida

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

Isilayidi soopopayi

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

Isilayidi esisilayida

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

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

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

Isilayidi esibhityileyo

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

Isilayidi sangaphambili

marbles I-GSAP inomboniso wezilayidi ezilandelayo eya kuziswa kumsebenzisi. Ukugqibelela kwimodeli kwiwebhusayithi yefashoni okanye yoyilo.

Izilayida utshintsho

Utshintsho lwesilayidi

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.


Umxholo wenqaku uyabambelela kwimigaqo yethu imigaqo yokuziphatha yokuhlela. Ukuxela impazamo cofa apha.

Yiba ngowokuqala ukuphawula

Shiya uluvo lwakho

Idilesi yakho ye email aziyi kupapashwa. ezidingekayo ziphawulwe *

*

*

  1. Uxanduva lwedatha: UMiguel Ángel Gatón
  2. Injongo yedatha: Ulawulo lwe-SPAM, ulawulo lwezimvo.
  3. Umthetho: Imvume yakho
  4. Unxibelelwano lwedatha: Idatha ayizukuhanjiswa kubantu besithathu ngaphandle koxanduva lomthetho.
  5. Ukugcinwa kweenkcukacha
  6. Amalungelo: Ngalo naliphi na ixesha unganciphisa, uphinde uphinde ucime ulwazi lwakho.