35 zvimwe CSS zvinyorwa zvewebhusaiti yako

Isu takatoburitsa mavhiki mashoma apfuura akateedzana eCSS zvinyorwa zve gadziridza kuratidzwa kwemusoro weH2 zvechigadzirwa kana musoro wekupinda kusevhisi inotengeswa kune webhusaiti yevatengi. CSS zvinyorwa zvinova zvinokwanisa kupa iyo poindi yehunhu iyo isu yatiri kutsvaga kuti ifadze mutengi uye iyo yavanayo mune yavo portfolio kwenguva yakareba.

Isu tinodzoka nerumwe runyorwa rukuru rweCSS mameseji mhedzisiro ayo akanyatsogadzirirwa kuita webhusaiti nenzira yakanakisa. chigadzirwa, sevhisi, peji yekumhara kana imwe mhando yemusoro wenyaya. 35 mameseji mhedzisiro ausingakwanise kupotsa kuratidza kuti webhu dhizaini nhasi iri padanho rakanakisa uye kuti isu hatigone kupotsa chitima kuti tienderane neazvino ano aesthetics.

Chinyararire chemavara zvinyorwa

Icho chakanyanya kunyatsoita meseji icho chinoratidzwa seyakakwana yeiyo chaiyo mhando yemusoro wenyaya. Mune makotesheni zvinogona kuratidzwa kujekesa kuti isu tinoteerera kune dhizaini yeyedu webhusaiti kana iyo yemutengi.

Random CSS zvinyorwa zvemukati

Izvi zvisina kujairika CSS zvinyorwa zvekuyedza zvinoedza kuita sekunge zviripo kiyi yakavanzika yeketani. Iyo inokwezva nzira yekuburitsa chinyorwa chewebsite yakatsaurirwa kune imwe nhaurwa.

Cassie

Una mifananidzo mu svg izvo zvinoreva huremu hushoma kwazvo hwekuratidzwa kwechinyorwa chinoumbwa mumarudzi akati wandei. Iri kurova kuvepo kwechinyorwa ichi icho chinoshandisawo JavaScript kupa mucherechedzo zvakakwana.

Mifananidzo yemumvuri

Iyi yemimvuri yemumvuri mameseji ine yakanyanya kunyatso kunaka kwekubata uye yakasiyana nemamwe ese ezvinyorwa pane izvo zvinyorwa. Pano isu takakanganwa JavaScript kuunzwa pasina chimwe chinhu kunze kweCSS kodhi.

Morph chinyorwa

Chinyorwa chine hupenyu muJavaScript neCSS icho inoshandura cyclically nemamwe mavara neon. Kune mawebhusaiti pane iyo yekumashure ruvara iri nhema kana grey. Akanyorovera akanyorovera eakasiyana kwazvo mavara maitiro.

Kupatsanura runyoro rwemavara

Chinyorwa ichi chakadonhedzwa kuti chiitwe ratidza mumufananidzo wakanyanyisa. Iyo zvakare ine JavaScript. Nekudzvanya kamwe chete iwe unogona kuona iyo animation inopindirwa kune yakanyanya kufarira mameseji maitiro.

Mifananidzo yeWave

Wave mafirimu mukati mezvinyorwa neSVG. Imwe yeanoda kuziva eizvi chinyorwa chiitiko chiri pamufananidzo wepashure uye gradient iyo inozadza mumasaisai kuti ibude pachena.

Mifananidzo yakarukwa

Chidiki cheJavaScript chinozadzisa meseji mese mairi tsamba imwe neimwe ine kukosha kwayo saizi saka zvinoita sekunge inoumbwa nezvakasiyana zvitambi. Mhedzisiro huru yerunyorwa rwekugadzira mumharidzo.

Chiutsi chiito

Huru hutsi mhedzisiro yechinyorwa icho iri kutsakatika zvishoma nezvishoma kunyangarika zvachose. Inogona kushandiswa kurova kana kudzvanya uye kuita kuti iwo mavara ashanduke ave pamberi pedu. Kwete JavaScript uye diki kwazvo CSS kodhi.

Bubble mhedzisiro

Iyo jQuery chinyorwa mhedzisiro iyo inotiratidza isu maitirwo acho iyo bubble mhedzisiro mune musoro muHTML. Mhedzisiro ndeye kuita kuti mabhuru aoneke kubva kuseri kwechinyorwa sekunge yaive mvura inopenya. Inotyisa kwazvo.

Mifananidzo yekuzadza yehupenyu

Anemavara mavara mhedzisiro anozadza font neiyo kumashure mufananidzo. Hazvidi JavaScript uye inobata chete neCSS kodhi. Iyo inononoka uye yakatsetseka mifananidzo yemavara anozove akakwana pane chaiwo madingindira ewebhu webhusaiti.

Chinyorwa chinyorwa muCSS neHTML

Rakareruka chinyorwa chemifananidzo muCSS neHTML inoita iyo mazwi anodonha akatwasuka kubva kumusoro. Isu tinokanganwa nezveJavaScript pano kupedzisa yakatwasuka uye yakapusa mifananidzo pasina kuwanda kukuru.

Ruvara Chinyorwa Dhirowa

Pano chinyorwa chinotorwa pamwe iyo inokatyamadza kwazvo mhedzisiro uye izvo zvinogona kupa noti yezvinhu zvine chekuita nekuyaruka kana hudiki. Iyo pakupedzisira haina kuvhara, nepo font ichipfuura nhevedzano yeakasimba matoni.

Mifananidzo yehupenyu muSVG

Hupenyu hweakarurama sekondi imwe chete inoenda kuburikidza nekudhirowa kwese yetsamba dzemavara akanyorwa muSVG. Iyo ine zvishoma yeJavaScript kodhi yekuenda pamwe neCSS neHTML.

Mumvuri chinyorwa

Mumvuri wenyaya iyi unoburitsa iyo kudzika maitiro nemavara akajeka anotaridzika kunge chitoro chepastry. Kuremara chete ndekwekuti haina kugadzirirwa nharembozha.

Motserati

Mifananidzo muCSS neHTML inozviratidza pachayo nekuda kwehunyanzvi hwayo uye zvimwe mavara anotangira kubva yero uye tsvuku. Zvekushandisa kwakatemwa nehunyanzvi hwekuratidzwa kweayo mavara ayo anomhanya kuburikidza nekudhirowa kwenyaya.

Kuputika kwekuita

Chinyorwa mhedzisiro ye Yakaputika ikaita zvidimbu zvakawanda kuti isu tinogona kudzora nekusiya mbeva mbeva ichienda pamusoro peimwe yetsamba dzinoumba izwi. Inoona-inobata maziso, yemhando yepamusoro zvinyorwa zvinoshandisa HTML, CSS uye JavaScript.

Wave zvinyorwa zvinoitika

Pasina JavaScript, iyi yekunyorwa kwemavara mhedzisiro inokwanisa kuisa iyo animation iyo chaizvo inofambisa iyo yekumashure mufananidzo kuburikidza nekudhirowa kweshoko. Kurova pasina kupokana uye nemhedzisiro huru.

GSAP mifananidzo

Semumafirimu mazhinji, tsamba dzese dzinoumba ndima dzinozoonekwa kubva kwese kwese kusvika pakupedzisira dzonyora zvirevo nemhedzisiro huru pamifananidzo. Yakatsetseka chaizvo kune imwe yemhedzisiro ye mamwe anotora maziso uye emhando yepamusoro mavara pane ese runyorwa. Zvakakosha kuti uzvichengete mupfungwa kune mamwe marudzi ebasa revatengi.

Ruvara rwemavara mavara

Una inononoka uye inonaya maficha yemavara mune iwo mavara anokwanisa kugadzira gradient. Kunyangwe iine zvishoma zveJavaScript, inonyanya kutemerwa paSSSS. Iyo ndeimwe yeaya asinganetsi mhedzisiro, asi izvo zvinoratidza kukwirira kwekuziva nzira yekuisarudzira iyo yewebhu. Hazvizoendi zvisingaonekwi.

Hazviite mavara emavara

El tsvuku bhokisi rakakomberedza zvinyorwa Inotendeuka pachayo ine mumvuri mhedzisiro inovhara iro izwi kana chirevo. Iyo inokatyamadza zvikuru uye inofadza zvikuru kuvhara mukova kana musoro wewebhu saiti nekunaka.

Multicolored mavara anozadza neSVG

Multicolor zadza mifananidzo iyo inoshandurwa seimwe yeayo protruding mameseji mhedzisiro pachawo. Iyo yakasarudzika mune irondedzero uye iine iwo mabombastic anobata ayo anokonzeresa manzwiro kune webhu mushanyi. Kana achiziva kuisa, anozopa katsamba.

Mifananidzo yehupenyu muSVG

Senge nzira yekuenda kwaari yaive yakarukwa yakajeka animated SVG kudhirowa kwemavara. Imwe yeanonyanya kufarira pane iyo rondedzero uye iyo inoiswa munzvimbo yayo yega kuti izvizivise pachayo zvakakwana.

Rugwaro rwemagirazi

Chinyorwa ichi muJavaScript, CSS neHTML chinogona kunge chiri icho kubata kwakakosha kwesangano rekushambadzira kupa katsamba mushoko remutsara. Mhedzisiro yacho inokurudzira uye inokwezva kutarisa kune mushanyi.

Rugwaro rwemagetsi

Senge paive nekukanganiswa mune iyo chiratidzo iyo tora chinyorwa kana kuchirarama, ichi chinyorwa mhedzisiro kupedzisa kukuru. Mumwe chete pasina kupokana uye anozviratidza. Yakagadzirwa muHTML (pug) uye CSS (SCSS).

Glitch chinyorwa SCSS

Imwe glitch zvinyorwa zvine zvinokanganisa izvo saiti yako ichawana pane yakasarudzika webhusaiti nekuda kwetimu, zvirokwazvo zvine chekuita nesainzi ngano.

Hover zvinyorwa 

Iyo nguva yatinoisa pointer pamusoro pezvinyorwa, ichi chichava mhando yemichinjikwa izvo zvinotibvumidza kuti tizvifambise kuburikidza nechero retsamba kuti tizvitarise, sezvo mamwe ese achange asiri ekutarisa. HTML, CSS neJavaScript kune yakasarudzika mameseji mhedzisiro.

Hover mavara mune maonero

Patinoisa iyo mbeva mbeva pamusoro peichi chinyorwa, ichafamba mune yekuda kuziva kwazvo iyo inopfuudza mhedzisiro ye3D.

Mifananidzo yakakwenenzverwa

Neye mbeva pointer isu tinosimbisa iwo mavara se dai yaizoteedzerwa kana kutemwa. Chinyorwa chinodonha kubva kumusoro kuvhara mazwi ese ari mundima. Pasina JavaScript uye neCSS.

Rufaro rugwaro

Chinyorwa chinoitika ndinofara kuti icharova kudzamara taisa mbeva mbeva pamusoro pemamwe mavara ayo. Mhedzisiro inokonzerwa ichave iri kusvetuka kwevamwe kunzi izvo. Pasina JavaScript uye neCSS.

Mavara e3D mukuumbwa

Imwe 3D mameseji mhedzisiro e vanoumba mazwi akasiyana kubva tsamba dzose iyo ichaonekwa pamwe chete yakaswededzwa kubva kunze kuenda mukati. Mhedzisiro huru uye inoonekwa kwazvo uye cinematic. Mumwe akakurudzira imwe pane iyo runyorwa.

Yakachena CSS zvinyorwa mumumvuri

Aya mavara anoshanda mune yakachena CSS provoke mumvuri wemhedzisiro huru uye zvemaitiro makuru. Zvisingataurike uye imwe yezvakakurumbira pane iri runyorwa. Hapana hupenyu, asi hwakajeka.

Mumvuri wakanaka

Mumvuri mhedzisiro inotaridzika chaizvo. Yakakwana yekumhara mapeji kana nzvimbo dzekuchengetedza masikati. CSS yakachena kuti ibude yega.

Wechipiri mumvuri

Mumwe mukuru mumvuri unoita mukati HTML neCSS inomira pachena iri yoga. Mumvuri mumitsara unogadzira kukwirira kukuru kune mamwe mawebhusaiti akanangana.

Parallax Mumvuri

Isu tinopedzisa runyorwa neimwe yemhedzisiro yakanakisa muparallax yemumvuri wakakandirwa nerugwaro. Isu tinopfuudza iyo mbeva mbeva uye nekuenderera kurudyi, iko kure kure mumvuri kunozoratidzwa. Yakanyorwa naRact, ES6 uye Baberi.

Iwe une rumwe runyorwa rwe zvinyorwa pano.