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
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
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
Oopopayi kwiCSS nakwi-HTML equlathe utshintsho olulula lotolo zangoku zodidi oludala. Akukho nto ngaphandle kwale yoopopayi yotolo olugqibeleleyo kwaye ilula.
Utolo oopopayi
Uthotho lweentolo ezinobomi ngaphakathi izikhundla ezahlukeneyo kunye neentshukumo. Intshukumo ingasecaleni kweentolo eziqulathe i "hover" ebalaselisa indawo ethathwa lutolo kwiwebhusayithi.
Ikhonkco lotolo
A ukujikeleza isangqa xa sishiya isalathisi se mouse phezu kolu phawu. Upopayi olula owenziwe kakuhle, kodwa onesiphumo esihle njengabo bonke esabelana nabo kolu ngeno Creativos Online.
Utolo kathathu oopopayi
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
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
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 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
Utolo olulula lweCSS xa uzigoba ngotshintsho kumbala. A kwezona tolo zisisiseko, kodwa ukunqongophala komgangatho kwaye oko kulindeleke ukuba ubambe njengabanye abaninzi.
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
Un ulingelo lweentolo apho sifumana khona iintlobo ezahlukeneyo zazo ezinobunewunewu bokudalwa nge-div kunye nezinto zobuxoki.
Iintolo zeCSS ezinyulu
Okunye uhlobo lweentolo ezicebisa Uluhlu, nangona silapha ngaphandle kokudalwa kwi-CSS nakwi-HTML.
Utolo olugobileyo lweCSS
Ukuba ufuna ukunika isiphumo esigobile ngokungathi sitsaliwe Esandleni, olu tolo kwi-CSS lulungele loo njongo.
Utolo
Utolo olunenguqulelo ze-CSS ezifikelela kwi ukonakala kwetolo kwimifanekiso eliqela ezobe umzobo lowo ubuzwayo.
Iintolo ezintathu 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
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
Okunye oopopayi elula engenasiphelo kwaye ephawuleka ngokuphela ukwenza olunye utolo kwaye ufeze "iluphu" ekhethekileyo.
Gooey utolo oopopayi
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
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 ebonisiweyo ilula kakhulu kwaye Iqukethe oopopayi elula. Oku akuthethi ukuba sijamelene nekhowudi esemgangathweni njengaleyo yabelwe nguJoshua MacDonald.
Utolo oGqwayizayo
Olunye utolo olune bounce oopopayi kwi-HTML nakwi-CSS Oko kuzama ukwahluka kwabanye. Ngokuqinisekileyo uyifumana kwidemo kwaye ukhuphele ikhonkco.
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.
Molo! Ndiyabulela kakhulu ngolwazi. Ndinombuzo malunga notolo olugobileyo… ngaba ikhona indlela yokutshintsha ukujikeleza kwegophe? ungandibonisa ikhowudi? Ndiyayixabisa!