I-23 iintolo ezinobomi kwiCSS kwiwebhusayithi yakho

Iintolo zeCSS

Siyaqhubeka nomnye umjikelo wamanqaku esiwabeka kuwo Ukugxininisa kwezi zinto esinokuzifumana simahla kwiiwebhusayithi ezinjenge codepen.io. IiSayithi ezinexabiso elikhulu lokuthatha ikhowudi kwi-CSS, kwi-HTML okanye kwiJavaScript, kwaye ngenxa yoko kukhokelela kwiziphumo ezigqwesileyo kwinkangeleko ebonakalayo yewebhusayithi; iwebhusayithi esiya kuthi siyilandele kwezinye iinjongo ngokuphunyezwa kwekhowudi ecwangciswe kakuhle kunye nemibono yoyilo.

Ezi zi 23 iintolo zoopopayi zeCSS ezigqibelele kwezo zinto zihlala zalathisa ukujonga komsebenzisi onqwenela ukudlula phambi kweqela leprojekthi ye-X, okanye kwindawo apho kunokuthengwa khona kwi-eCommerce; iintolo ezibalulekileyo ukuze sikwazi ukwenza iifaneli kwaye ke sifezekise uguquko olukhulu lwaloo mveliso siyithengisayo kwi-eCommerce yethu.

Iintolo ze-CSS zoopopayi

I-Css iintolo ezingoopopayi

Iingcambu I-CSS yoopopayi ehamba ecaleni Ezisampulu zokuqala zeentolo ze-CSS zoopopayi kolu ngcelele lwe-23. Iziphumo ezilula zeentolo ezineziphumo ezibonwayo kwaye ezingenanto ingaphezulu kokuthethwayo.

Utolo lwezoopopayi

Utolo lwezoopopayi

Omnye Utolo kwi-svg eya kufezekisa oopopayi aboneleyo kunye nomgangatho xa sinesikhombisi semouse ngaphezulu kwayo. Kwintshukumo esetyhula siza kugxininisa le nto ibalulekileyo yewebhu kwiiwebhusayithi ezininzi.

Utolo oopopayi

Utolo oopopayi

Oopopayi kwiCSS nakwi-HTML equlathe utshintsho olulula lotolo zangoku zodidi oludala. Akukho nto ngaphandle kwale yoopopayi yotolo olugqibeleleyo kwaye ilula.

Utolo oopopayi

Iifayile ze-CSS

Uthotho lweentolo ezinobomi ngaphakathi izikhundla ezahlukeneyo kunye neentshukumo. Intshukumo ingasecaleni kweentolo eziqulathe i "hover" ebalaselisa indawo ethathwa lutolo kwiwebhusayithi.

Ikhonkco lotolo

Isangqa sokujikeleza

A ukujikeleza isangqa xa sishiya isikhombisi semouse ngaphezulu kwale icon. Oopopayi abalawulwa ngokulula, kodwa benesiphumo esihle njengabanye esabelana nabo kule posi kwi-Intanethi ye-Intanethi.

Utolo kathathu oopopayi

Svg kathathu

Ngokusekwe kumfanekiso weSVG, Apha unothotho lweewebhu ezinikezelwe kolu hlobo lwefomathi yomfanekiso, a oopopayi abathathu okhokelela kubo bobathathu iintolo zokuqala kwinto enye. Esinye isiphumo esihle kwiwebhusayithi yakho esiyinika ubuchule bokuchukumisa.

Utolo olulula lweCSS lubuyela phezulu

I-CSS elula ecocekileyo

Lo Utolo olulula kwiCSS unomsebenzi wokubuyela ekuqaleni kwewebhusayithi. I-gimmicky spin ngesiqalo kunye nesantya sokugqibela esenza oopopayi abacocekileyo nabalula ekuboneni kuqala, nangona ihlala inika ubuchwephesha bobuchwephesha njengangaphambili.

Utolo olwe-elastic

Ilastiki

Lo Utolo lwe-elastic luphawuleka kwinto yokuba xa ucofa okanye uyayicinezela, isiphumo sokubuyisa siza kwenziwa kwinqanaba apho i icon ikhoyo. Kuya kufuneka sazi ukuba lutolo olusekwe ikakhulu kwiJavaScript.

Utolo SVG oopopayi

Utolo oopopayi

Utolo lwe-SVG olulinde wena shiya isikhombisi phantsi Ukuze isiphumo sokufuduka sivele kwaye umbala utshintshe ubomvu, ubuncinci obunikwe kumzekelo, iya kuba ngumcimbi wokuziqhelanisa ukuthanda kwethu kunye nokukhetha kwangaphambili.

I-CSS Chevron Arrows

I-CSS DRM

Utolo olulula lweCSS xa uzigoba ngotshintsho kumbala. A kwezona tolo zisisiseko, kodwa ukunqongophala komgangatho kwaye oko kulindeleke ukuba ubambe njengabanye abaninzi.

Utolo svg

Utolo svg

Iziphumo zotshintsho kubunzima okanye «bunzima» be icon, kulo mzekelo utolo njengomntu ophambili kolu ngeno. Wonyusa nje ubunzima betolo ngesiphumo esisiseko esisekwe kwiCSS.

Utolo

Utolo

Un ulingelo lweentolo apho sifumana khona iintlobo ezahlukeneyo zazo ezinobunewunewu bokudalwa nge-div kunye nezinto zobuxoki.

Iintolo zeCSS ezinyulu

Iintolo zeCSS ezinyulu

Okunye uhlobo lweentolo ezicebisa Uluhlu, nangona silapha ngaphandle kokudalwa kwi-CSS nakwi-HTML.

Utolo olugobileyo lweCSS

Utolo olugobileyo

Ukuba ufuna ukunika isiphumo esigobile ngokungathi sitsaliwe Esandleni, olu tolo kwi-CSS lulungele loo njongo.

Utolo

Utolo lotshintsho

Utolo olunenguqulelo ze-CSS ezifikelela kwi ukonakala kwetolo kwimifanekiso eliqela ezobe umzobo lowo ubuzwayo.

Iintolo ezintathu kwelinye

Bathathu kwelinye

Oopopayi obuthathaka kwi uyakwazi ukujika iintolo zibe zithathu zibe nye. Enye yeempembelelo esinokuyijonga kwaye sinekhowudi yayo ukuze siyisebenzise njengoko sifuna emsebenzini okanye kwiwebhusayithi yethu.

Icocekileyo yokuhambisa imifanekiso yeCSS

I-CSS emsulwa

Oopopayi kwi imowudi engenasiphelo uthotho lweentolo ezivumela enye ukuba idlule ithathe indawo yeziko xa inkulu. Ngokugqitywa okuhle, iba lutolo olufanelekileyo lokukhuthaza ukulandela ulwalathiso kwiwebhu.

I-SCSS utolo oopopayi

I-SCSS

Okunye oopopayi elula engenasiphelo kwaye ephawuleka ngokuphela ukwenza olunye utolo kwaye ufeze "iluphu" ekhethekileyo.

Gooey utolo oopopayi

Gooey

Kuzo zonke iiopopayi ezibonwe kolu luhlu lweentolo, ngaphandle kwamathandabuzo eyona inomdla kwaye iyile yoyilo. Oopopayi abaphantse badlula kwinqanaba apho uskrola ngokuthe nkqo. Kucetyiswa kakhulu ukuba ushiye umsebenzisi emangalisiwe oza kwiwebhusayithi yakho.

Oopopayi ukuya esiphelweni

Utolo ezantsi

Oopopayi, njengangaphambili, banayo kumsebenzisi ekupheleni kwewebhusayithi ukuze idlulele kwienyawo. Iphawulwa ngoopopayi bokudala eyenza ibonakale kwabanye. Kungcono ukuba uyibone isebenza ukusuka kwikhonkco ukuya kwi-codepen.io.

Utolo icon elula

I icon elula

I-icon ebonisiweyo ilula kakhulu kwaye Iqukethe oopopayi elula. Oku akuthethi ukuba sijamelene nekhowudi esemgangathweni njengaleyo yabelwe nguJoshua MacDonald.

Utolo oGqwayizayo

Utolo lwezoopopayi

Olunye utolo olune bounce oopopayi kwi-HTML nakwi-CSS Oko kuzama ukwahluka kwabanye. Ngokuqinisekileyo uyifumana kwidemo kwaye ukhuphele ikhonkco.

Utolo oopopayi

Utolo oopopayi

Olunye upopayi lolutolo kwi-CSS nakwi-HTML leyo kakuhle «isusiwe». Yeyona asethi yakhe inkulu yokuhlulahlula kolunye uthotho lweentolo ezingama-23 ze-CSS kwiwebhusayithi yakho.


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

Izimvo, shiya eyakho

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.   Carolina sitsho

    Molo! Ndiyabulela kakhulu ngolwazi. Ndinombuzo malunga notolo olugobileyo… ngaba ikhona indlela yokutshintsha ukujikeleza kwegophe? ungandibonisa ikhowudi? Ndiyayixabisa!