Zure webgunearen tipografiarako ezinbesteko 27 CSS testu efektu

Sormenak linean

La gure webgunearen tipografia ezinbestekoa da hori egokia da eCommerce, blog edo lurreratze orri baten bidez proiektatzen ari garen edukirako. Horregatik, jakin behar da beldurretik zein iturri etor dakigukeen ondo aukeratzen, irakurlea edo eroslea bere edukia osatzen duten paragrafoetako bakoitza irakurtzera animatu dadin.

Baina tipografia alde batera utzita, zuhurki CSS testu efektuak aplika ditzake ukitu berezi hori emateko eta bezeroari gure merkataritza elektronikoko katalogoan dugun produktu baten bila "harrapatzeko". Beraz, funtsezko 25 CSS testu efektu partekatuko ditugu, letra mota hau gehiago nabarmentzeko gure webgunea bisitatzen duen erabiltzailearen aurrean.

3D Testua

3d efektua

CSS testu efektua, elementu ezberdinekin jolasten duena ekarri 3D letra motara hori gure webguneko bisitariaren interesa atzemateko gai da. Deigarririk gabe deigarria. Ez galdu diseinatzaileentzako egungo letra tipo hauetara.

3D CSS tipografia

3D CSS

Eragin hori 3Dk bide desberdinetatik garamatza aurrekoa, kokatzen dugun lekuan protagonismoa hartuko duen letra tipoa lortzeko.

Masking Path animazioa

Maskaratzeko bidea

Hau testu efektua animatua da eta oso erraza dirudien arrenBere eraginkortasuna eta oso konplexua da. Eskuz idatziz bezala. Ziur zure kokapenerako leku aproposa topatuko duzula, zerrenda honetako onenetakoa baita.

Errotulazio efektua

Efecto

Ekoizten da zabaltzeko efektua eta errebote dotorezia eta profesionaltasun handiko sentsazioa sortzen duen testuan.

Congelados

Congelados

Badago testuan hausnarketa efektua ezin hobea letra mota zehatz baterako. Neguarekin, landetxeekin edo eskiarekin zerikusia duen zerbait ezin hobea litzateke.

Kaixo

Kaixo

Eragin hori saiatu forma ñimiño batzuk marrazten horrela, azkenean, testua osatzen dute. Web diseinuak lortzen duen konplexutasuna erakusten duen CSS kodea fabrikatu berri da.

Testu lerroen animazioa

leinua

Aurrekoaren antzera, a CSS testu efektu deigarria kodea aplikatu zaion testua marrazten duten lerro sortarekin.

Mahuka

Mahuka

Beste efektu bat arrakasta handiko testu animatua letra bakoitza desitxuratzeko gai dena, kalitate handiko animazioa sortzeko.

CSS animazioa testua nabarmentzeko

CSS

Beste animazio bat oso testu efektu dotorea eta gure webgunera datorren bisitari horren profesionaltasun sentsazioa sortzeko gai dela.

SVG bideo maskara testura bidaltzeko

SVG

Zerrenda osoko efektu onenetako bat eta hori atzeko plano gisa dugun bideoaren maskara erakusten du testua protagonista izan dadin. Maila guztietan kalitate handia.

CSS animaziozko testu sarrera

Sarrera

Zure webgunean testua sartzerakoan efektu hori ondo sartzeko gai bazara, esponentzialki zenbaki osoak gehituko dira sormenari dagokionez.

Testu efektu "freskoa"

COOL efektua

Testu efektu horren beste maskara bat GIF irudi bat erabiltzen du bideo maskara bezalako beste emaitza bikaina lortzeko. Hobe duzu Codepen.io-ko kodearen adibidetik ikustea.

Testu arazoa

aldez

Testu efektu hau zorroan ezin hobeto egokitzen da dinamismoa bilatzen dugun edozein alderditako artista batena edo baita musika talde batena ere. Erabat deigarria.

Psycho Glitch

psiko

Aurrekoaren antzera, beste efektu bat testu bikaina eta guztiz ausazkoa gainerakoengandik nabarmendu nahi duten webguneetarako. Behar bezala integratuta, pastelari glasea jar diezaioke.

VHS testua

VHS testua

Formatu hori 80ko eta 90eko hamarkadetan hain ezaguna den bideoa CSS honen bidez erreproduzitu dezakegula.

Pasatu efektua testuan

Pasatzean

Utzi besterik gabe saguaren erakuslea letra bakoitzaren gainean HTML, CSS eta JS kode honek sortzen duten pasatzearen efektua aurkitzeko. Oso interesgarria maila orokorrean.

Pasa ezazu Udaberriko testu efektua

Udaberriko testua

Zerbait teknologikorako pasatu testu efektua teknologia berriekin lotutako webgune mota guztietarako oso ondo funtzionatzen duena. Botoi batean aplikatuta ere emaitza bikaina lortzen da.

Sass Loops CSS sinplea

Sass

Beste testu efektua Kalitate handiko CSS dotorea mota guztietako sentsazioak sor ditzake bisitariarengan. Oso gomendatua.

Lerro anitz hartzen ditu

span

CSS testu efektu oso erraza, baina deigarrientzako potentzial handiarekin Zer da hori.

Azpimarra animatua

Azpimarrauta

Nahi baduzu nabarmendu bisitariak testuaren paragrafoa kokatu saguaren erakuslea, CSS efektu honek azpimarra sortzen du. Oso interesgarria sormena eta kuriositatea duelako.

"Gauza arrotzak" efektua

Stranger Things

Herrikoia bezala ochontera telesaila Stranger Things, pasatzearen efektu horri esker, serieko tipografia emaitza bikainarekin egin ahal izango da.

Testu birakaria

Biratzean

Benetan da ur-jauzi efektua pantailan dugun testuaren hitz gakoa ordezkatzen duena. Oso gimmicky.

CSS Groovy efektua

groovy

Efektua testu itzal itzela gai jakin bati buruzko web edukirako.

Gradiente efektua

Gradientearen itzala

Ikuspegi efektu ikusgarria letra mota bat itzalduz. Bikaina, inolako zalantzarik gabe, kolore asko ditugun leku guztietan.

Itzal paralaxia

Parallax

A paralaje itzal efektua erakuslea testuaren gainean mugitzen dugun bitartean.

Idazketa efektua

klik efektua

Sinplea eta testurako idazketa-efektu deigarria oso ondo birsortuta dagoena.

Testua idazten

Testua idazten dut

Beste galdu ezin duzun idazketa efektua CSS, HTML eta JS.


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.