35 ƙarin tasirin rubutu na CSS don gidan yanar gizon ku

Mun riga mun buga 'yan makonnin da suka gabata jerin tasirin tasirin CSS don inganta gabatarwar taken H2 na samfur ko taken shigarwa don sabis wanda ake siyarwa akan gidan yanar gizon abokin ciniki. Tasirin rubutu na CSS waɗanda ke da damar bayar da wannan ingancin da muke nema don burge abokin harka da kuma cewa suna cikin kundin aikin su na dogon lokaci.

Mun dawo tare da wani babban jerin tasirin rubutu na CSS waɗanda aka keɓance musamman don gabatar da gidan yanar gizo ta hanya mafi kyau. samfurin, sabis, shafin saukowa ko wani nau'in jigo. Tasirin rubutu 35 da ba za ku iya rasa ba don nuna cewa ƙirar gidan yanar gizo ta yau tana a matakin mafi kyau kuma ba za mu iya rasa jirgin don ci gaba da abubuwan fasaha na zamani ba.

Tasirin rubutu na fim mai shiru

Tasirin rubutu na musamman wanda aka gabatar dashi azaman cikakke don takamaiman nau'in jigo. A cikin ƙididdiga ana iya nuna shi don bayyana a fili cewa muna mai da hankali ga ƙirar gidan yanar gizonmu ko na abokin ciniki.

Random shigar da rubutun CSS

Wannan shigarwar rubutun CSS bazuwar yayi ƙoƙari ya zagaya kamar dai shi ne mabuɗin sirrin sarka. Hanya mai ban mamaki na gabatar da rubutu don gidan yanar gizon da aka keɓe don wani batun.

Cassie

Una tashin hankali a cikin svg wannan yana nufin nauyi kaɗan don gabatar da rubutu wanda aka ƙirƙira shi da launuka da yawa. Kasancewar wannan rubutun yana amfani da JavaScript don bayar da alamar gaba ɗaya.

Rubutun inuwa mai rai

Wannan rubutun inuwa mai rai yana da kyakkyawar taɓawa ta musamman kuma ya bambanta da sauran shigarwar akan jerin. nan mun manta JavaScript ba za a gabatar da shi a cikin komai ba face lambar CSS.

Rubutun Morph

Rubutu mai rai a cikin JavaScript da CSS cewa canza canji tare da wasu launuka neon. Don shafukan yanar gizo inda launin bango ya kasance baƙi ko launin toka. Motsi mai santsi don tasirin rubutu daban.

Raba rubutu taimako

An jefa wannan rubutu zuwa sakamako zuwa nuna a cikin raɗaɗi mai raɗaɗi. Hakanan yana da JavaScript. Tare da dannawa ɗaya zaku iya ganin rayarwar da aka samu don tasirin matanin sha'awa.

Wave animation

Motsa tashin hankali tsakanin rubutu tare da SVG. Ofaya daga cikin mahimman batutuwa na wannan Tasirin rubutu yana kan hoton bango da kuma dan tudu wanda ke cika igiyar ruwa don ya fice da kyau.

Rubutun warƙar mai rai

Bitananan Javaan JavaScript suna cin nasarar tasirin rubutu wanda kowace harafi tana da girman girmanta don haka yana kama da an yi shi da lambobi daban-daban. Babban sakamako ga rubutu mai matukar kirkira a cikin gabatarwar.

Tasirin hayaki

Babban tasirin hayaki ga rubutu cewa a hankali yake bacewa a bace gaba daya. Ana iya amfani dashi don bugawa ko dannawa kuma sa rubutun ya ƙafe a gabanmu. Babu JavaScript da ƙaramin lambar CSS.

Bubble sakamako

Tasirin rubutu jQuery wanda yake nuna mana yadda ake kirkirar sa tasirin kumfa a cikin rubutun kai tsaye a cikin HTML. Tasirin shine sanya kumfa su bayyana daga bayan rubutun kamar suna walƙiya ruwa. Mai ban mamaki.

Rubutun mai rai mai rai

Tasirin rubutu mai rai wanda ya cika font da hoton bango. Baya buƙatar JavaScript kuma yana ma'amala da lambar CSS kawai. Rawar jinkiri da santsi don rubutu wanda zai kasance cikakke akan takamaiman jigogi don gidan yanar gizo.

Rubutun rai a cikin CSS da HTML

Saƙo mai sauƙi na rubutu a cikin CSS da HTML wanda ke sa kalmomi sun fadi a tsaye daga sama. Mun manta game da JavaScript a nan don kammala madaidaiciya da sauƙi rayarwa ba tare da kunsawa da yawa ba.

Zanen Rubutun Launi

Anan aka zana rubutu da tasiri mai tasiri sosai kuma hakan na iya ba da bayanin game da batutuwan da suka shafi samartaka ko ƙuruciya. A ƙarshe ya zama fanko, yayin da aka kewaya font da jerin sautunan masu ƙarfi.

Rubutun mai rai a cikin SVG

Anation na kawai dakika daya ya ratsa dukkan zane na haruffan rubutu mai rai a cikin SVG. Yana da ɗan lambar JavaScript don tafiya tare da CSS da HTML.

Rubutun inuwa

Inuwar wannan rubutun tana samar da zurfin sakamako a launuka masu haske kusan suna kama da shagon kek. Gurguntakar kawai ita ce cewa ba'a inganta ta ga na'urorin hannu ba.

Montserrat

Animation a cikin CSS da HTML wanda ke gabatar da kanta don ƙirarta da wasu launuka jere daga rawaya da ja. Don amfanin da aka ƙaddara ta hanyar rawar sa ta waɗancan launuka waɗanda ke gudana ta hanyar zane na rubutu.

Tasirin fashewa

Tasirin rubutu na Fashewa cikin gutsutsuren mutane cewa za mu iya rage gudu ta barin barin linzamin kwamfuta yana bin kowane haruffa da suka ƙunshi kalmar. Sauke ido, tasirin rubutu mai inganci wanda ke amfani da HTML, CSS da JavaScript.

Tasirin rubutun kalaman

Ba tare da JavaScript ba, wannan tasirin tasirin tasirin yana sarrafawa don sanya rayarwa cewa gaske motsa hoton bango ta hanyar zane kalma. Yajin aiki ba tare da wata shakka ba kuma yana da babban sakamako.

Rawan GSAP

Kamar yadda yake a cikin fina-finai da yawa, duk haruffan da suke yin sakin layi zasu bayyana daga ko'ina don haɗa jumlolin a ƙarshe tare da babban tasirin rayarwar. Mai santsi sosai ga ɗayan sakamakon karin rubutu mai daukar ido da rubutu mai inganci akan duka jerin. Mahimmanci don kiyaye shi a hankali don wasu nau'ikan ayyukan abokin ciniki.

Rawanin rubutu mai launi

Una tashin hankali da motsi mai motsi na launi a cikin rubutun da ke kulawa don yin gradient. Kodayake yana da ɗan JavaScript, amma ya dogara ne akan SCSS. Yana ɗayan waɗannan tasirin dabaru, amma wannan yana nuna ladabi na sanin sanin yadda ake zaɓar sa don yanar gizo. Ba zai tafi sananne ba.

Tasirin rubutu mara yuwuwa

El jan akwati kewaye da rubutu yana kunna kanta da tasirin inuwa wanda ke rufe kalma ko jimla. Yana da ban mamaki sosai kuma yana da ban sha'awa don rufe ƙofar ko taken shafin yanar gizo tare da ladabi.

Multicolored rubutu ya cika da SVG

Multicolor cika animation wanda aka fassara azaman ɗayan waɗannan fitowar rubutu kanta. Babu irinsa a cikin jerin kuma yana da waɗancan abubuwan taɓawa wanda zai haifar da daɗaɗa ga baƙo na yanar gizo. Idan ya san yadda ake sanyawa, zai ba da takardar.

Rubutun mai rai a cikin SVG

Kamar dai hanyar da yake zuwa gare shi take zane mai rai SVG mai zane mai haske. Ofaya daga cikin abubuwan ban sha'awa a cikin jeren kuma ana sanya hakan a wurinsa don gano kanta daidai.

Rubutun glitch

Wannan rubutu a cikin JavaScript, CSS da HTML zai iya zama daidai taɓa musamman na kamfanin talla bayar da bayanin a cikin kalmar jumla. Tasirin yana da ban sha'awa kuma yana jan hankali ga baƙon.

Rubutun glitch

Kamar dai akwai tsoma baki a cikin siginar cewa zana rubutu ko rayar da shi, wannan tasirin rubutu babban kammalawa ne. Singular ba tare da wata shakka ba kuma ya gabatar da kanta. Anyi a HTML (pug) da CSS (SCSS).

Rubutun glitch SCSS

Wani glitch rubutu tare da tsangwama wanda rukunin yanar gizonku zai samo akan gidan yanar gizo na musamman saboda batun, tabbas mai alaka da almarar kimiyya.

Santa rubutu 

A lokacin da muka sanya alama a kan rubutun, wannan zai zama wani nau'i na giciye wanda zai bamu damar matsar da shi ta kowane harafi don mayar da hankali gare shi, tunda sauran zasu zama daga hankali. HTML, CSS da JavaScript don tasirin tasirin rubutu na musamman.

Tsayar da rubutu cikin hangen nesa

Lokacin da muka sanya Alamar linzamin kwamfuta akan wannan rubutun, zai motsa cikin hangen nesa mai ban sha'awa wanda ke watsa tasirin 3D.

Mai rubutu haskaka rubutu

Tare da manunin linzamin kwamfuta za mu haskaka rubutu kamar idan ya kasance za a kofe ko a yanka. Tasirin rubutu wanda ya faɗi daga sama don rufe duk kalmomin a cikin sakin layi. Ba tare da JavaScript ba kuma tare da CSS.

Rubutu mai dadi

Tasirin rubutu farin ciki da cewa zai buga har sai mun sanya alamar linzamin kwamfuta kan wasu haruffa. Tasirin da ya haifar zai zama tsallen wasu ne da za a kira haka. Ba tare da JavaScript ba kuma tare da CSS.

Rubutun 3D a cikin abun da ke ciki

Wani tasirin rubutu na 3D don tafi ƙirƙirar kalmomi daban-daban daga duk haruffa wanda zai bayyana a haɗe da an zuƙo shi daga waje zuwa ciki. Babban sakamako da kuma gani sosai da kuma fim. Wani ya bada shawarar daya a jerin.

Rubutun CSS mai tsabta a inuwa

Wannan tasirin rubutu a tsarkakakke CSS psoke inuwar babban sakamako kuma na babban salo. Ba za a iya kuskurewa ba kuma wani karin bayanai a cikin jerin. Babu tashin hankali, amma mai haske.

Inuwa mai kyau

Tasirin inuwa wanda da gaske yana da kyau. Cikakke don saukowa shafuka ko shafukan yanar gizo. CSS tsarkakakke don tsayawa da kansa.

Inuwa ta biyu

Wani babban inuwar tasiri a cikin HTML da CSS waɗanda ke tsaye da kanta. Layin layi yana haifar da kyakkyawa don takamaiman rukunin yanar gizo.

Parallax Inuwa

Mun ƙare jerin tare da ɗaya na mafi kyawun sakamako a cikin parallax ga inuwar da rubutu ya sanya. Mun wuce maɓallin linzamin kwamfuta kuma gaba zuwa dama, mafi nisa inuwar za ta bayyana. Written by Ract, ES6 da Babel.

Kuna da wani jerin Tasirin rubutu anan.