35 CSS testu efektu gehiago zure webgunerako

Lehertu den efektua

Dagoeneko duela aste batzuk argitaratu genuen CSS testu efektu sorta bat hobetu H2 izenburuaren aurkezpena produktu baten edo bezero baten webgunean saltzen den zerbitzu baten sarreraren goiburua. CSS testu efektuak, bezeroak txunditzeko bilatzen ari garen eta denbora asko daramatzaten zorroan eman nahi ditugun kalitate puntu hori emateko gai direnak.

Webgune bat ahalik eta modu onenean aurkezteko bereziki eskainitako CSS testu efektuen beste zerrenda bikain batekin itzuliko gara. produktua, zerbitzua, helmuga orria edo beste gai mota bat. Ezin dituzu galdu 35 testu efektu gaur egun web diseinua maila onenean dagoela erakusteko eta ezin dugula trena galdu egungo estetikarekin jarraitzeko.

Film isilen testu efektua

moult

Gai mota zehatz baterako perfektu gisa aurkezten den testu efektu oso berezia. Komatxo artean ager daiteke garbi uzteko arreta jartzen dugula gure webgunearen edo bezeroaren diseinuan.

Ausazko CSS testu sarrera

Ausazko testua

Ausazko CSS testu sarrera hau ausarta izaten saiatuko da balitz bezala kate baten giltza sekretua. Gai jakin bati eskainitako webgune baterako testua aurkezteko oso modu deigarria.

Cassie

Cassie

a animazioa svg-n horrek oso pisu txikia esan nahi du hainbat koloretan osatutako testua aurkezteko. Deigarria da marka hau guztiz JavaScript emateko JavaScript ere erabiltzen duen testu honen presentzia.

Itzaleko testu animatua

Itzaleko testu animatua

Itzaleko testu animatu honek oso ukitu estetiko berezia du eta zerrendako gainerako sarrerekiko desberdina da. Hemen JavaScript ahaztu dugu CSS kodea baino ez da aurkeztu behar.

Morph testua

Morph testua

Javascript eta CSS testu animatu bat ziklikoki eraldatzen da neon kolore batzuekin. Atzeko planoaren kolorea beltza edo grisa duten webguneetarako. Animazio oso leuna, testu efektu ezberdina lortzeko.

Testu erliebe zatitua

Animatutako testu zatitua

Testu hau indarrean jarri da erakutsi animazio oso maltzurrean. JavaScript ere badu. Klik batekin testu efektu oso bitxia lortzeko lortutako animazioa ikus dezakezu.

 

Olatuen animazioa

Uhin animatuko testua

Uhin animazioa testuaren barruan SVG batekin. Honen puntu bitxietako bat testu efektua atzeko irudian dago eta olatua betetzen duen gradientea behar bezala nabarmentzeko.

Deformatutako testu animatua

Warp testua

JavaScript pixka batek testu efektua lortzen du letra bakoitzak bere tamainako balioa du letra eranskailu ezberdinez osatuta dagoela dirudi. Efektu bikaina aurkezpenean oso testu sortzailea izateko.

Ke efektua

Ke efektua

Ke efektu bikaina testu batentzat pixkanaka desagertzen ari da guztiz desagertzeko. Pultsatu edo klik egin eta testua gure aurretik lurruntzeko erabil daiteke. Ez dago JavaScript eta oso CSS kode gutxi.

Burbuila efektua

Burbuila efektua

Nola sortu erakusten digun jQuery testu efektua burbuila efektua goiburuko HTML batean. Eragina da testuaren atzetik burbuilak ur distiratsu gisa agertzea. Oso deigarria.

Animaziozko betetze testua

Animatutako Testu Betea

Letra-tipoa atzeko irudiarekin betetzen duen testu efektu animatua. Ez du JavaScript behar eta CSS kodea soilik lantzen du. Oso animazio motela eta leuna webgune baterako gai zehatzetan ezin hobea izango den testurako.

Testu animazioa CSS eta HTML formatuan

CSS testu hutsa

CSS eta HTML testu animazio sinplea hitzak bertikalki erortzen dira goitik. Javascript-a ahazten dugu hemen animazio zuzen eta sinple bat osatzeko askorik gabe.

Koloretako Testu Marrazkia

Koloretako testua

Hemen testua marrazten da oso kolore efektu deigarria eta horrek oharra eman dezake nerabezaroarekin edo gazteriarekin lotutako gaientzat. Azkenean hutsik dago, iturria tonu biziko batzuek zeharkatzen duten bitartean.

Testu animatua SVGn

SVGn animatua

Besterik gabeko animazioa segundo bat marrazki osoa zeharkatzen du animaziozko testuaren letren SVG. Javascript kode apur bat du CSS eta HTMLrekin batera joateko.

Itzal testua

Testu itzala

Testu honen itzalak sakonera efektua ia gozogintza itxura duten kolore biziekin. Urritasun bakarra gailu mugikorretarako ez dagoela optimizatuta.

Montserrat

Montserrat

CSS eta HTML animazioa, bere sormenagatik eta batzuengatik aurkezten dena kolore horia eta gorria artekoak. Testuaren marrazkia zeharkatzen duten koloreen animazioaren berezitasunak zehazten duen erabilerarako.

Leherketa efektua

Lehertu den efektua

Testuaren efektua Pieza ugaritan lehertu zen moteldu dezakegula saguaren erakuslea hitza osatzen duten letra bakoitzaren gainetik pasatuz. HTML, CSS eta JavaScript erabiltzen dituen kalitate handiko testu efektu deigarria.

Olatu-testu efektua

Wave testu svg

JavaScript gabe, olatu-testu efektu horrek animazio bat jartzea lortzen du hondoko irudia mugitzen du hitzaren marrazketaren bidez. Inolako zalantzarik gabe eta eragin handikoa.

GSAP animazioa

GSAP animazioa

Pelikula askotan bezala, paragrafo bat osatzen duten letra guztiak nonahi agertuko dira azkenean animazioan eragin handia duten esaldiak osatzeko. Oso leuna efektuetako bat lortzeko zerrenda osoan test erakargarriagoa eta kalitate handiagoa duena. Ezinbestekoa da bezeroen lan mota batzuetarako kontuan izatea.

Testu animazio koloretsua

color

a animazio motela eta arina kolorearen gradientea egitea lortzen duen testuan. JavaScript pixka bat duen arren, batez ere SCSS-n oinarritzen da. Efektu sotil horietako bat da, baina sarerako hautatzen jakin izanaren dotorezia erakusten dute. Ez da oharkabean pasatuko.

Ezinezkoa den testu efektua

Ezinezkoa den testua

El testuaren inguruko koadro gorria Hitza edo esaldia estaltzen duen itzal efektuarekin jotzen du bere burua. Oso deigarria eta interes handikoa da webgune baten sarrera edo goiburua dotoreziaz estaltzea.

Testu kolore anitzekoa SVGz betetzen da

SVG testua

Horietako bat bezala bihurtzen den kolore anitzeko betetze animazioa irteerako testu efektuak bera. Zerrendan bakarra da eta web bisitariari sentsazioak eragingo dizkion ukitu bonbak ditu. Jartzen badaki, oharra emango du.

Testu animatua SVGn

Bidea SVG

Haren bidea biraka ariko balitz bezala testuaren SVG marrazki bizia. Zerrendako bitxienetako bat eta bere lekuan kokatzen da bere burua primeran identifikatzeko.

Glitch testua

aldez

Javascript, CSS eta HTML testu hau ezin hobea izan liteke publizitate agentziaren ukitu berezia oharra esaldi bateko hitz batean emateko. Efektua inspiratzailea da eta bisitariari arreta erakartzen dio.

Glitch testua

Glitch testua

Hori seinalean interferentzia egongo balitz bezala marraztu testua edo animatu, testu efektu hau akabera bikaina da. Singularra inolako zalantzarik gabe eta bere burua aurkezten du. HTML (pug) eta CSS (SCSS) bidez egina.

Glitch testua SCSS

Glitch zientzia

Zalantzarik gabe, zure webguneak gaia dela eta oso webgune jakin batean aurkituko duen interferentziarekin egindako beste testu arazoren bat zientzia fikzioarekin lotuta.

Pasa ezazu testua 

Pasa ezazu testua

Erakuslea testuaren gainean jarri dugun unean, gurutze moduko bat bihurtuko da hori horri esker, letra bakoitzean zehar mugitzeko aukera dugu fokatzeko, gainerakoak fokutik kanpo egongo baitira. HTML, CSS eta JavaScript testu efektu oso berezia lortzeko.

Pasatu testua perspektiban

Pasa ezazu testua

Noiz jarri dugu saguaren erakuslea testu honen gainean, 3Dren efektua transmititzen duen oso ikuspegi bitxian mugituko da.

Testu bizidun animatua

Testu aipagarria

Saguaren erakuslearekin testua honela nabarmenduko dugu kopiatu edo moztu egingo balitz. Paragrafoko hitz guztiak estaltzeko goitik erortzen den testu efektua. JavaScript gabe eta CSS-rekin.

Testu zoriontsua

zoriontsu

Testu efektua zoriontsu dardara egingo duelako saguaren erakuslea bere letra batzuen gainean jarri arte. Eragindako efektua horrela deitzen diren batzuen jauzia izango da. JavaScript gabe eta CSS-rekin.

3D testua konposizioan

3D testua

3Dko beste testu efektu bat letra guztietako hitz desberdinak osatu kanpotik barrura handitutako unisonoan agertuko dena. Emaitza bikaina eta oso bisuala eta zinematografikoa. Zerrendan gomendatutako beste bat.

CSS testu hutsa itzalean

Testu itzala

Testu efektu hau CSS orri puruanemaitza bikaineko itzala itzali eta estilo bikainekoa. Nahastezina eta zerrendako beste aipagarrietako bat. Animaziorik ez, baina bikaina.

Itzal polita

Itzal polita

Itxura bikaina duen itzal efektua. Ezin hobea lurreratze orrietarako edo haurtzaindegiko webguneak. CSS hutsa bere kabuz nabarmentzeko.

Bigarren itzala

Bigarren itzala svg

Urtean beste itzal efektu handia HTML eta CSS nabarmentzen dira berez. Lerroetako itzalak dotorezia sortzen du gaikako webgune zehatzetarako.

Parallax Shadow

Parallax Shadow

Zerrenda batekin amaitzen dugu paralajearen efektu dotoreenetakoa testuak egindako itzalagatik. Saguaren erakuslea pasatzen dugu eta eskuinera zenbat eta gehiago egin, orduan eta urrunago egongo da itzala islatuta. Ract, ES6 eta Babel-ek idatzia.

Beste zerrenda bat duzu testu efektuak hemen.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Idatzi lehenengo iruzkina

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko. Beharrezko eremuak markatuta daude *

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.