Siyaqhubeka nomunye umjikelezo wama-athikili lapho sifaka khona indlela esikhuluma ngayo kulezo zinto esingazithola mahhala kusuka kumawebhusayithi afana ne-codepen.io. Amasayithi anenani elikhulu lokuthatha ikhodi nge-CSS, i-HTML noma iJavaScript, futhi ngaleyo ndlela aholele emiphumeleni emihle kakhulu kokubonwayo kwewebhusayithi; iwebhusayithi esizoqhubekisela kuyo ezinye izinhloso ngokusetshenziswa kwekhodi ehlelwe kahle kanye nemibono yokudala.
Lezi ziyi 23 imicibisholo ye-CSS epopayi ziphelele kulezo zinto ezivame ukuqondisa ukubuka komsebenzisi ohlose ukudlula ngaphambi kweqembu leprojekthi ye-thematic X, noma esikhaleni lapho ukuthenga kungenziwa khona ku-eCommerce; imicibisholo ebalulekile ukuze sikwazi ukudala imijondolo futhi ngaleyo ndlela sifinyelele ukuguqulwa okukhulu kwalowo mkhiqizo esiwuthengisa ku-eCommerce yethu.
Imicibisholo ye-Animated CSS
Arrows I-CSS egqwayiziwe ephenya eceleni okuyisampula lokuqala lemicibisholo ye-animated yeCSS kulolu chungechunge lwama-23. Umphumela olula kweminye imicibisholo enemiphumela emihle ebonakalayo futhi ongadluli kulokhu okushiwoyo.
Umcibisholo opopayiwe
Una umcibisholo ku-svg lokho kuzofeza ukugcwala okwanele nekhwalithi lapho sine-pointer yegundane phezu kwayo. Ngokunyakaza okuyindilinga sizogqamisa le web element ebalulekile kumawebhusayithi amaningi.
Umcibisholo womcibisholo
Ukugqwayiza ku-CSS naku-HTML okuqukethe ukuguqulwa okulula komcibisholo yesimanje kakhudlwana kokudala. Akukho okudlula lokhu kopopayi komcibisholo onokuphela okuhle futhi okulula.
Izithombe zomcibisholo
Uchungechunge lwemicibisholo epopayi ku izikhundla ezahlukene nokunyakaza. Ukunyakaza kuhamba eceleni kwemicibisholo equkethe "ukuhambisa phezulu" okugqamisa isikhala umcibisholo osithatha kuwebhusayithi.
Isixhumanisi somcibisholo
A hambisa indingilizi uma sishiya isikhombi segundane phezu kwalesi sithonjana. Ukugqwayiza okulula okwenziwe kahle, kodwa okunomthelela omuhle njengawo wonke amanye esiwabelana nawo kulokhu kungenela Creativos Online.
Ukugqwayiza komcibisholo kathathu
Ngokuya ngesithombe se-SVG, lapha unochungechunge lwamawebhusayithi anikezelwe kulolu hlobo lwefomethi yesithombe, a izithombe eziphindwe kathathu eziholela kubo bobathathu abahlala imicibisholo yokuqala kowodwa. Omunye umphumela omuhle kuwebhusayithi yakho oyinikeza ukuthintwa kochwepheshe.
Umcibisholo olula we-CSS ubuyele phezulu
Lona umcibisholo olula ku-CSS unomsebenzi wokubuyela ekuqaleni kwewebhusayithi. Ukujika okuyindinisa ngesivinini sokuqala nokuphela esakha izithombe ezihlanzekile nezilula lapho uthi nhlá, yize ngaso sonke isikhathi kunikeza ukuthintwa okufana nokwangaphambilini.
Umcibisholo onwebekayo
Lona umcibisholo onwebekayo uyaziwa ngeqiniso lokuthi uma uchofoza noma uyicindezele, izodala umphumela wokubhabha emkhakheni lapho kutholakala khona isithonjana. Kufanele sazi ukuthi ngumcibisholo osuselwe ikakhulu kuJavaScript.
Umcibisholo SVG onopopayi
Umcibisholo we-SVG okulindele shiya isikhombi phansi Ukuze umphumela wokufuduka uvele futhi umbala uguquke ube bomvu, okungenani lowo onikezwe esibonelweni, lapho-ke kuzoba yindaba yokuwukwenza ngokwezifiso zethu nokukhetha kwethu kusengaphambili.
I-CSS DRM Arrows
Umcibisholo olula we-CSS lapho uzigoba ngoshintsho kumbala. A yemicibisholo eyisisekelo, kepha ngoba akukho ukuntuleka kwekhwalithi futhi lokho kulindeleke ukuthinta njengabanye abaningi.
Umcibisholo svg
Umphumela wenguquko esisindweni noma «ngesisindo» sesithonjana, kulokhu umcibisholo njenge-protagonist yalokhu kungena. Uvele wandise isisindo somcibisholo ngomphumela omuhle osuselwa ku-CSS.
Umcibisholo
Un ukuhlolwa komcibisholo lapho sithola izinhlobo ezahlukahlukene zazo ezinesici sokwakhiwa ngezinto ze-div nezimbumbulu.
Imicibisholo ye-CSS emsulwa
Okunye uhlobo lwemicibisholo enothisa uhlu, yize lapha singabonakala ngaphandle kokudalwa ku-CSS naku-HTML.
Umcibisholo ogobile we-CSS
Uma ufuna ukunikela umphumela ogobile njengokungathi udwetshiwe esandleni, lo mcibisholo ku-CSS ulungele leyo njongo.
Umcibisholo
Umcibisholo onoshintsho lwe-CSS oluthola ukubola komphumela womcibisholo ezithombeni eziningana ezidweba isibalo okukhulunywa ngaso.
Imicibisholo emithathu koyedwa
Ukugqwayiza okubucayi ku ukuphatha ukuguqula imicibisholo emithathu ibe munye. Omunye waleyo miphumela esingayibheka nokuthi sinekhodi yayo ukuze siyisebenzise njengoba sifuna emsebenzini wethu noma kuwebhusayithi.
I-Pure CSS scroll scroll
Ukugqwayiza ku- imodi engapheli ochungechungeni lwemicibisholo evumela ukuthi enye idlule ukuthatha isigaba sokuqala lapho inkulu kakhulu. Ngokuqedela okuhle, kuba ngumcibisholo ofanele ukukukhuthaza ukuthi ulandele izinkomba kuwebhu.
Ukugqwayiza komcibisholo we-SCSS
Okunye izithombe ezilula ezingapheli futhi okubonakala ngokufiphala ukwenza omunye umcibisholo futhi ngaleyo ndlela kufezekiswe i- "loop" ekhetheke kakhulu.
Ukugqwayiza komcibisholo weGooey
Kuzo zonke izinto ezigqwayizayo ezibonwe kulolu hlu lwemicibisholo, ngaphandle kokungabaza ilukuluku kakhulu futhi idala kakhulu. Ukugqwayiza okucishe kudlule emkhakheni lapho uskrola ubheke phezulu. Kunconywe kakhulu ukushiya umsebenzisi emangele oza kuwebhusayithi yakho.
Ukugqwayiza ngasekupheleni
Lokhu kopopayi, njengakudala, kunakho kumsebenzisi ekugcineni kwewebhusayithi ukuze kwenzeke kunyaweni. Kubonakala ngopopayi wokudala olwenza luhluke kokunye. Kungcono ukuthi uyibone isebenza kusuka kusixhumanisi kuya ku-codepen.io.
Umcibisholo isithonjana esilula
Isithonjana njengoba kukhonjisiwe silula futhi lokho Iqukethe izithombe ezilula. Lokhu akusho ukuthi sibhekene nekhodi yekhwalithi efana naleyo eyabiwe nguJoshua MacDonald.
Ukushaya Umcibisholo Oshaya
Omunye umcibisholo one bounce izithombe ku-HTML naku-CSS lokho kuzama ukwehluka kwabanye. Impela uyithola kudemo bese ulanda isixhumanisi.
Umcibisholo womcibisholo
Okunye ukugqwayiza komcibisholo ku-CSS naku-HTML lokho kahle «wathutha». Kuyimpahla yayo enkulu ekuyihlukaniseni nalo lonke lolu chungechunge lwemicibisholo engama-23 CSS yewebhusayithi yakho.
Sawubona! Ngiyabonga kakhulu ngolwazi. Nginombuzo mayelana nomcibisholo ogobile ... ngabe ikhona indlela yokushintsha ukujikeleza kwejika? ungangikhombisa ikhodi? Ngingakujabulela!