Iintloko ze-29 ze-CSS kunye neenyawo zeblogi yakho okanye iwebhusayithi

Unyawo lweCSS

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

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

Parallax

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

I-Angled Header

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

Itshitshisiwe

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

Igobile svg

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

I-Div ilungisiwe

Ngempembelelo yomfanekiso weParlax, okubhaliweyo okuphezulu okubonakalayo okuchaphazela umphumo omkhulu kufezekiswe ngomfanekiso ongemva ongashukumi ngelixa eminye iskrola njengoko siskrola ngemouse.

Parallax umaleko owahlukileyo

Uluhlu oluninzi

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

Iposi elungisiweyo

Isihloko esisigxina kwisithuba ngasinye esenziwe kwi-HTML, CSS nakwiJavaScript. Okwangoku siqengqelekela phantsi, intloko incitshisiwe kwaye zilungiswe phezulu.

Intloko yesikrini esigcweleyo kunye nopopayi

Amaza oopopayi

Intloko ebonelela ngoopopayi ihamba kamva kwaye ivelisa umphumo wokuphumla kumbukeli.

Umfanekiso weqhawe elipheleleyo

Umfanekiso weqhawe

Con umphumo wokusondeza, le okuphezulu okupheleleyo ityhilwa njengenye yemvelaphi enkulu. Ukugqibelela kwiwebhusayithi apho undwendwe luya kuthi lusebenzise ngokuskrola ukuhamba kuyo.

I-Flexbox enamaqhosha 

I-Flexbox enamaqhosha

Intloko ebuthatha bonke ububanzi bekhusi ukubonisa iqhosha. Ukugqibelela kwamaphepha okufika nge CSS flexbox.

Intloko yeHero yeFlexbox

Iqhawe leFlexbox

Intloko enefuthe iParallax kunye neFlexbox ilula obubalasele ubuhle bokuyilwa kwayo ikakhulu.

Okubhaliweyo okuphezulu kwephepha

Okubhalwe ngentloko

Njengoko igama layo libonisa, isihloko esisigxina xa siskrola ngempuku xa sihamba ukubona lonke iphepha lewebhu.

Ukuphendula ngokuSikrola okuPhendulayo

Iscroll esisabelayo siphendula

Esinye isihloko esisigxina esisiphumo esihle xa imenyu ifikelela phezulu ephepheni, ngobakwaye ngalo mzuzu ihlala ihleli kwaye sinokuqhubeka nokuskrolela isiza.

Skrolela iNhloko

Skrolela entlokweni

Yahlukile kokunye ngu oopopayi abafanelekileyo nababuthathaka njengokuba sihamba. Ekupheleni kwayo, ibhodi yebhodi ephezulu ihlala ihleli phezulu.

Isentloko esiPhendulayo esiPhezulu

I-header ephendulayo ephendulayo

Olunye uphiliso olukhulu lwe Yahlula le ntloko kwinto yonke nge HTML, CSS kunye neJavaScript.

Ukubhalwa kwephepha ngaphakathi / ngaphandle

yintloko yentloko

Okubhaliweyo okuphezulu kwephepha okubonakalayo kwisiphumo Ngaphakathi / ngaphandle emva kokukrola kwaye ivelisa imvakalelo yokuphindaphinda.

Ukuphela kwentloko

Ukuphela kwentloko

Esinye isiphumo sopopayi unomdla kwaye umhle kakhulu kwi-HTML, CSS kunye neJavaScript.

Okubhaliweyo okuphezulu kwephepha kufihliwe

Fihla ngokuzenzekelayo

Intloko eyahlukileyo xa ufihle ngokwe sisebenzisa ukuskrola kunye nopopayi oko kungabonakali kodwa kumgangatho ophezulu.

Unyawo lweparallax

Unyawo lweparallax

Unyawo olusisigxina okanye oluzinzileyo nge-HTML, CSS kunye neJavaScript. Ye esemgangathweni kunye nokwenza mnyama kuchaphazelo.

Imibhalo engezantsi yesikali somxholo

Isikali seenyawo

Umgangatho ophezulu kunye neenyawo zasekuqaleni wothusa undwendwe ngendlela entle yokubonisa le ndawo yewebhu.

Imithombo yeendaba yeendaba zeNtlalo

Imidiya yokuncokola

Unyawo olume ngeenyawo olume ngaphandle amaqhosha akhokelela kunxibelelwano lwasentlalweni eyaziwa kakhulu. Oopopayi abakhoyo xa ushiya isikhombisi semouse ngapha konxibelelwano lwasentlalweni.

Imenyu yeenyawo ephathwayo

Imifanekiso yonyawo oluphathwayo

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

Elula ukulungisa

Yenziwe nge-HTML kunye ne-CSS unyawo olulula ngaphandle kwempumelelo enkulu kwaye luyachuma.

React Header yeVidiyo

React Header yeVidiyo

Intloko ene Ividiyo elula React.js.

Umbhalo wevidiyo

Umbhalo wevidiyo

Okunye intloko enevidiyo elula kwaye zikumgangatho ophezulu.

Isikrini esipheleleyo seVidiyo eneMix-Blend

Isikrini esiphelele

Bonisa i ividiyo epheleleyo yesikrini ngombhalo kumaleko usebenzisa imixube yokudibanisa.

Oopopayi bentloko yeVidiyo

Oopopayi bentloko yevidiyo

Oopopayi babekhona wena ne Adobe Emva Iziphumo ukuhambelana nazo zonke izikhangeli. Ayisebenzi kwiselfowuni.

Intloko yevidiyo ephendulayo ngegradient

noluphendulayo

El Igradient yeyona nto ibonakalayo kule ntloko yevidiyo ishiyekileyo.


Izimvo ezi-2, shiya ezakho

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.

  1.   Tecn Oku sitsho

    Zonke zandiqinisekisa. Enkosi

    1.    UManuel Ramirez sitsho

      Wamkelekile!