Iintloko kunye neenyawo zii Izinto eziyimfuneko xa usenza iphepha elitsha web okanye ibhlog, okanye ukuba akukho enye into ekufuneka siyivuselele ukuze sihlangabezane nemigangatho yangoku yoyilo lwewebhu. Zizithuba apho undwendwe kwiwebhusayithi yethu zihlala zihlawula ingqalelo enkulu, ke kuya kufuneka sibakhathalele kwaye sibaphathe ngokwaneleyo ukuze bakholise iliso, ngaphandle kokusebenza.
Kungenxa yoko le nto siza kwabelana Iintloko kunye neenyawo ze-29 zeCSS onokuzisebenzisa kwibhlog yakho okanye kwiwebhusayithi, kwaye ke unike inqaku lomgangatho obulifuna. Olu luhlu lwenziwe ngamanqaku apheleleyo kwinqaku lesikrini, kunye nobungakanani obuqhelekileyo, ii-headers ezizinzileyo okanye ezizinzileyo, iinyawo kunye nezinye izihloko zevidiyo ukunika enye indawo yokujonga kwiwebhusayithi yakho.
Intloko egobile
Okubhaliweyo okuphezulu kwephepha kuchongwa ngu isimbo sayo esigobileyo emazantsi eyenza ukuba ibe yintloko ebaluleke kakhulu kwiwebhusayithi okanye kwibhlog. Icocekile i-CSS, ke sele ithatha ixesha ukuyivavanya kwiwebhu yakho ukuba iza kujongeka njani ukuba uyayifaka kwibhlog yakho.
Umfanekiso wentloko weParallax
Ngempembelelo enkulu yomfanekiso weParallax, le ntloko iyazazisa ngo Sebenzisa indawo yangasemva yomfanekiso weCSS. Umfanekiso we-header uza kubekwa phezulu ephepheni ngekhowudi efanelekileyo.
I-header echanekileyo ye-Angled
Le ntloko ilungiswe kakuhle phezulu kwiphepha lewebhu ukuya umahluko naloo mgca wokudibanisa uwela wonke oxwesileyo wokujonga komsebenzisi. Ibonisa indlela izinto zobumbumbulu ze-CSS ezinokusetyenziselwa ngayo ukwenza i-header emileyo enomfanekiso ongasemva.
Intloko ebiyelweyo
I-CSS kunye ne-HTML yesi sihloko kumzekelo onikiweyo ubonakalisiwe ecaleni komgca wokudibanisa owela iscreen sonke ukusuka kwelinye icala ukuya kwelinye.
Intloko ene-SVG oopopayi
Isihloko esilula kakhulu, nangona sisebenzisa oopopayi be-SVG ukwahlulahlula esinazo kolu luhlu. Ungafikelela kuluhlu olukhulu lwamaphepha ewebhu ngoopopayi be-SVG ukusuka apha.
Intloko ehleliweyo ene-Div
Ngempembelelo yomfanekiso weParlax, okubhaliweyo okuphezulu okubonakalayo okuchaphazela umphumo omkhulu kufezekiswe ngomfanekiso ongemva ongashukumi ngelixa eminye iskrola njengoko siskrola ngemouse.
Parallax umaleko owahlukileyo
I-header yokugqiba okukhulu ngaphakathi Ii-HTML ezininzi, i-CSS kunye neJavaScript kwaye inokusetyenziswa ngokugqibeleleyo kwiwebhusayithi enxulumene nehlabathi lemidlalo yevidiyo. Ukugqiba okuhle kuyo yonke indawo.
Intloko yeposi ehleliweyo
Isihloko esisigxina kwisithuba ngasinye esenziwe kwi-HTML, CSS nakwiJavaScript. Okwangoku siqengqelekela phantsi, intloko incitshisiwe kwaye zilungiswe phezulu.
Intloko yesikrini esigcweleyo kunye nopopayi
Intloko ebonelela ngoopopayi ihamba kamva kwaye ivelisa umphumo wokuphumla kumbukeli.
Umfanekiso weqhawe elipheleleyo
Con umphumo wokusondeza, le okuphezulu okupheleleyo ityhilwa njengenye yemvelaphi enkulu. Ukugqibelela kwiwebhusayithi apho undwendwe luya kuthi lusebenzise ngokuskrola ukuhamba kuyo.
I-Flexbox enamaqhosha
Intloko ebuthatha bonke ububanzi bekhusi ukubonisa iqhosha. Ukugqibelela kwamaphepha okufika nge CSS flexbox.
Intloko yeHero yeFlexbox
Intloko enefuthe iParallax kunye neFlexbox ilula obubalasele ubuhle bokuyilwa kwayo ikakhulu.
Okubhaliweyo okuphezulu kwephepha
Njengoko igama layo libonisa, isihloko esisigxina xa siskrola ngempuku xa sihamba ukubona lonke iphepha lewebhu.
Ukuphendula ngokuSikrola okuPhendulayo
Esinye isihloko esisigxina esisiphumo esihle xa imenyu ifikelela phezulu ephepheni, ngobakwaye ngalo mzuzu ihlala ihleli kwaye sinokuqhubeka nokuskrolela isiza.
Skrolela iNhloko
Yahlukile kokunye ngu oopopayi abafanelekileyo nababuthathaka njengokuba sihamba. Ekupheleni kwayo, ibhodi yebhodi ephezulu ihlala ihleli phezulu.
Isentloko esiPhendulayo esiPhezulu
Olunye uphiliso olukhulu lwe Yahlula le ntloko kwinto yonke nge HTML, CSS kunye neJavaScript.
Ukubhalwa kwephepha ngaphakathi / ngaphandle
Okubhaliweyo okuphezulu kwephepha okubonakalayo kwisiphumo Ngaphakathi / ngaphandle emva kokukrola kwaye ivelisa imvakalelo yokuphindaphinda.
Ukuphela kwentloko
Esinye isiphumo sopopayi unomdla kwaye umhle kakhulu kwi-HTML, CSS kunye neJavaScript.
Okubhaliweyo okuphezulu kwephepha kufihliwe
Intloko eyahlukileyo xa ufihle ngokwe sisebenzisa ukuskrola kunye nopopayi oko kungabonakali kodwa kumgangatho ophezulu.
Unyawo lweparallax
Unyawo olusisigxina okanye oluzinzileyo nge-HTML, CSS kunye neJavaScript. Ye esemgangathweni kunye nokwenza mnyama kuchaphazelo.
Imibhalo engezantsi yesikali somxholo
Umgangatho ophezulu kunye neenyawo zasekuqaleni wothusa undwendwe ngendlela entle yokubonisa le ndawo yewebhu.
Imithombo yeendaba yeendaba zeNtlalo
Unyawo olume ngeenyawo olume ngaphandle amaqhosha akhokelela kunxibelelwano lwasentlalweni eyaziwa kakhulu. Oopopayi abakhoyo xa ushiya isikhombisi semouse ngapha konxibelelwano lwasentlalweni.
Imenyu yeenyawo ephathwayo
Ngokunciphisa iwindow yewindows ukujonga le footer, uya kuba nakho fumana amacandelo ama-2-3 ukuba umsebenzisi angafumana kwisixhobo esiphathwayo. Kuboniswa kwi-767px.
Umbhalo osezantsi ephepheni olula
Yenziwe nge-HTML kunye ne-CSS unyawo olulula ngaphandle kwempumelelo enkulu kwaye luyachuma.
React Header yeVidiyo
Intloko ene Ividiyo elula React.js.
Umbhalo wevidiyo
Okunye intloko enevidiyo elula kwaye zikumgangatho ophezulu.
Isikrini esipheleleyo seVidiyo eneMix-Blend
Bonisa i ividiyo epheleleyo yesikrini ngombhalo kumaleko usebenzisa imixube yokudibanisa.
Oopopayi bentloko yeVidiyo
Oopopayi babekhona wena ne Adobe Emva Iziphumo ukuhambelana nazo zonke izikhangeli. Ayisebenzi kwiselfowuni.
Intloko yevidiyo ephendulayo ngegradient
El Igradient yeyona nto ibonakalayo kule ntloko yevidiyo ishiyekileyo.
Zonke zandiqinisekisa. Enkosi
Wamkelekile!