Izihloko nezinyawo ze-29 CSS kubhulogi yakho noma iwebhusayithi

Unyaweni we-CSS

Onhlokweni nonyaweni kukhona Izinto ezibalulekile lapho kwakhiwa ikhasi elisha web noma i-blog, noma uma kungekho okunye esidinga ukukuvuselela ukuze kuhlangatshezwane nezindinganiso zamanje zokwakhiwa kwewebhu. Kuyizikhala lapho isivakashi esikwiwebhusayithi yethu zivame ukunaka kakhulu, ngakho-ke kufanele sizinakekele futhi sizitotobele ngokwanele ukuze zijabulise iso, ngaphandle kokusebenza.

Yingakho sizokwabelana Izihloko nezinyawo ze-29 CSS ongazisebenzisa kubhulogi yakho noma kuwebhusayithi, futhi ngaleyo ndlela unikeze lelo phuzu lekhwalithi obukade uyifuna. Lolu hlu lwakhiwa izihloko ze-athikili yesikrini esigcwele, kanye nosayizi ojwayelekile, izihloko ezingaguquki noma ezingaguquki, onyaweni namanye amaheda wevidiyo ukunikeza elinye iphuzu lokubuka iwebhusayithi yakho.

Unhlokweni ogobile

Unhlokweni ogobile

Unhlokweni okhonjwa ngu- isitayela sayo esigobile ezansi okwenza kube yisihloko esikhetheke kakhulu sewebhusayithi noma ibhulogi. I-CSS emsulwa, ngakho-ke sekuvele kuthatha isikhathi ukuyihlola kusiteji sakho sewebhu ukuthi sizobukeka kanjani uma usifaka kubhulogi yakho.

Unhlokweni isithombe Parallax

I-Parallax

Ngomphumela omuhle wesithombe se-Parallax, le nhloko iziveza nge sebenzisa isikhundla sangemuva se-CSS. Isithombe sikanhlokweni besizobekwa phezulu ekhasini lekhodi lomphumela omuhle.

Unhlokweni olungisiwe we-Angled

Isihloko se-Angled

Lesi sihloko silungiswe kahle phezulu ekhasini lewebhu ukuze hlukanisa nalowo mugqa wokudonsa eyeqa yonke indawo enezingqimba yokubuka komsebenzisi. Kukhombisa ukuthi izinto ze-CSS mbumbulu zingasetshenziswa kanjani ukwenza unhlokweni olungisiwe onomfanekiso ongemuva.

Unhlokweni osikiwe

I-Skewed

I-CSS ne-HTML yalesi sihloko esibonelweni esinikeziwe sibonakala kulowo mugqa wokudonsa owela isikrini sonke usuka kolunye uhlangothi uye kolunye.

Unhlokweni onopopayi be-SVG

I-svg egobile

Unhlokweni olula kakhulu, yize usebenzisa ukugqwayiza kwe-SVG ukuze wazihlukanise yalabo esinabo kulolu hlu. Ungangena kuhlu olukhulu lwamakhasi ewebhu ngemidwebo ye-SVG kusuka lapha.

Iheda elungisiwe ene-Div

I-Div ilungisiwe

Ngomphumela wesithombe se-Parallax, unhlokweni omisiwe ovelela umphumela omuhle kufinyelelwe ngomfanekiso ongemuva ohleliwe ngenkathi konke kuskrola njengoba sihamba negundane.

Parallax umfanekiso wezendlalelo eziningi

Isendlalelo esiningi

Unhlokweni wesiphetho esihle ku I-HTML enemikhakha eminingi, i-CSS neJavaScript futhi lokho kungasetshenziswa ngokuphelele kuwebhusayithi ehlobene nomhlaba wemidlalo yevidiyo. Isiphetho esihle kulo lonke.

Unhlokweni wokuthunyelwe okungaguquki

Okuthunyelwe okuhleliwe

Unhlokweni omisiwe wokuthunyelwe ngakunye okwenziwe nge-HTML, CSS neJavaScript. Isikhathi lapho siwela phansi, unhlokweni uncishisiwe futhi kulungiswe phezulu.

Unhlokweni wesikrini esigcwele onopopayi

Amagagasi opopayi

Unhlokweni onikeza ukugqwayiza ukuthi ihamba kamuva futhi lokho kuveza umphumela wokukhululeka kumbukeli.

Isikrini esigcwele seHero image

Isithombe seqhawe

cunt umphumela wokusondeza, lokhu isihenqo esigcwele ivezwe njengeyokuqala okukhulu. Ilungele iwebhusayithi lapho isivakashi sizosebenzisa kakhulu ukuskrola ukuzungeza kuyo.

I-Flexbox enenkinobho 

I-Flexbox enenkinobho

Unhlokweni othatha bonke ububanzi besikrini ukubonisa inkinobho. Ilungele amakhasi okufika nge-CSS flexbox.

Isihloko se-Flexbox Hero

Iqhawe le-Flexbox

Unhlokweni osebenzayo i-parallax ne-flexbox ilula impela lokho kugqama ngobuhle bomklamo wayo ikakhulukazi.

Unhlokweni onamathelayo kuscroll

Inhloko enenkani

Njengoba igama layo liphakamisa, unhlokweni ohleliwe lapho siphenya negundane lapho sihamba ukubona lonke ikhasi lewebhu.

Ukuphendula Okunamathelayo Okusabelayo

Umqulu ophendulayo

Enye iheda elungisiwe yomphumela omuhle lapho imenyu ifinyelela phezulu ekhasini, kunganifuthi ngalowo mzuzu ihlala ilungisiwe futhi singaqhubeka nokudlulisa amehlo kusayithi.

Skrola Unhlokweni

Skrola unhlokweni

Ihlukile kokunye ngo- izithombe eziqondile nezintekenteke njengoba sihamba. Ekupheleni kwayo, i-headboard ihlala ilungisiwe phezulu.

Isihloko Sokupheqa Esiphendulayo

Unhlokweni wokuphendula osabelayo

Okunye ukugqwayiza okuhle kwe- hlukanisa le nhloko kokunye nge-HTML, CSS neJavaScript.

Unhlokweni In / out

vusa unhlokweni

Unhlokweni ohlukaniswa ngomphumela In / out emva kokupheqa futhi lokho kuveza umuzwa wokubuyela emuva.

Unhlokweni uyafiphala

Unhlokweni uyafiphala

Omunye umphumela wokugqwayiza ilukuluku futhi nenhle kakhulu nge-HTML, CSS neJavaScript.

Unhlokweni ofihliwe

Fihla ngokuzenzakalela

Unhlokweni ohlukile lapho ucashe ngokuya nge- sisebenzisa ukuskrola ngopopayi lokho akunakwa kepha kusezingeni eliphezulu.

Unyaweni weParlax

Unyaweni weParlax

Unyaweni omisiwe noma ongashintshi one-HTML, i-CSS neJavaScript. Kusuka ku- ikhwalithi enhle ngokufiphaza empeleni.

Unyaweni onesikali sokuqukethwe

Isikali sikanyaweni

Ikhwalithi ephezulu nonyaweni wokuqala we kumangaza isivakashi ngendlela enhle yokubonisa lesi sikhala sewebhu.

I-Social Media Footer

ezokuxhum

Unyaweni ovelele izinkinobho eziqondisa ukuxhumana nomphakathi eyaziwa kakhulu. Ukugqwayiza okukhiqizwe lapho kushiya isikhombisi segundane phezu kwenethiwekhi ngayinye kuvela.

Imenyu yonyawo opopayi

Unyaweni wonyaweni onyaweni

Ngokunciphisa iwindi lesiphequluli sewebhu ukubuka le footer, uzokwazi thola izigaba ezi-2-3 ukuthi umsebenzisi angakuthola kuselula. Kuboniswa ku-767px.

I-Footer Simple Fixed

Kulungisiwe okulula

Kwenziwe nge-HTML ne-CSS yi unyaweni olula ngaphandle kwempumuzo enkulu namafrills.

Sabela Unhlokweni Wevidiyo

Sabela Unhlokweni Wevidiyo

Isihloko esine- ividiyo elula React.js.

Unhlokweni Wevidiyo

Unhlokweni Wevidiyo

Okunye unhlokweni ngevidiyo elula futhi esezingeni eliphezulu.

Isihloko Esigcwele Sevidiyo Esine-Mix-Blend

Iskrini esigcwele

Khombisa i ividiyo yesikrini esigcwele ngombhalo kusendlalelo usebenzisa imodi yokuxuba.

Ukugqwayiza kweheda yevidiyo

Ukugqwayizwa kweheda yevidiyo

Ukugqwayiza kwaba egcizelele ne-Adobe After Effects ukusebenzisana nazo zonke iziphequluli. Akusebenzi kuselula.

Unhlokweni wevidiyo osabelayo one-gradient

Isabele

El I-gradient yilokho okugqamile kulesi sihloko sevidiyo kusuka kokunye.


Shiya umbono wakho

Ikheli lakho le ngeke ishicilelwe. Ezidingekayo ibhalwe nge *

*

*

  1. Ubhekele imininingwane: Miguel Ángel Gatón
  2. Inhloso yedatha: Lawula Ugaxekile, ukuphathwa kwamazwana.
  3. Ukusemthethweni: Imvume yakho
  4. Ukuxhumana kwemininingwane: Imininingwane ngeke idluliselwe kubantu besithathu ngaphandle kwesibopho esisemthethweni.
  5. Isitoreji sedatha: Idatabase ebanjwe yi-Occentus Networks (EU)
  6. Amalungelo: Nganoma yisiphi isikhathi ungakhawulela, uthole futhi ususe imininingwane yakho.

  1.   I-TecnOku kusho

    Bonke bangikholisile. Ngiyabonga

    1.    UManuel Ramirez kusho

      Wamukelekile!