Generator CSS glitch teksta

Ovaj alat gradi animirani RGB-split glitch efekt teksta isključivo pomoću CSS-a, koristeći dva duplicirana pseudo-elementa koja trepere i pomiču boju iza vašeg teksta. Upišite tekst, odaberite dvije boje naglaska, prilagodite intenzitet i brzinu glitcha, gledajte animaciju uživo, zatim kopirajte i generirani CSS i mali HTML koji je potreban.

Što je ovaj alat?

CSS glitch efekt oponaša izgled pokvarenog emitiranog signala ili poderane VHS trake tako što tekst duplicira dva puta pomoću pseudo-elemenata ::before i ::after, svaku kopiju blago pomiče obojenom text-shadow (klasično crvena i cijan, kao odjek analognih RGB grešaka signala), i animira clip-path svake kopije pomoću @keyframes tako da se različiti vodoravni isječci svake obojene kopije naizmjenično prikazuju i skrivaju kroz vrijeme.

Tehnika ne treba slike, JavaScript animacijsku petlju niti canvas — čisti je CSS slojevit na jednom HTML elementu koji nosi vlastiti tekst dva puta: jednom kao stvaran tekstualni sadržaj, i jednom putem atributa data-text koji pseudo-elementi čitaju pomoću content: attr(data-text).

Izvor: CSS Pseudo-Elements Module Level 4, W3C — definira pseudo-elemente ::before/::after i funkciju attr() na kojima je ovaj efekt izgrađen.

Zašto ga koristiti?

Živi animirani pregled — vidite stvaran efekt glitcha dok tipkate i prilagođavate postavke, ne samo statični mockup.
Dvije neovisno prilagodljive boje naglaska, zadano klasičan crveno/cijan RGB-split izgled, ali prilagodljivo bilo kojem brandu ili temi.
Klizač intenziteta kontrolira pomak obojene sjene u pikselima; klizač brzine kontrolira koliko brzo se ciklusi clip-path keyframea izmjenjuju.
Kopira i CSS (uključujući cijele @keyframes blokove) i točnu potrebnu HTML strukturu, jer efekt ovisi o atributu data-text koji se podudara s vidljivim tekstom.
Čisti CSS — nema potrebe za JavaScriptom tijekom rada nakon što je na vašoj stranici, i nema vanjskih biblioteka ili slika za učitavanje.
Besplatno, bez registracije, radi u potpunosti u vašem pregledniku.

Kako ga koristiti

Upišite tekst koji želite učiniti glitchastim u tekstualno polje — pregled se odmah ažurira.
Odaberite dvije boje naglaska; klasična zadana kombinacija je crvena i cijan za retro RGB-split izgled, ali rade i bilo koje dvije kontrastne boje.
Prilagodite klizač intenziteta da kontrolirate koliko su daleko dva obojena sloja — veće vrijednosti djeluju kao agresivniji glitch.
Prilagodite klizač brzine da kontrolirate koliko brzo glitch treperi.
Kopirajte CSS blok i zalijepite ga u svoj stylesheet.
Kopirajte HTML isječak i koristite ga točno kako je prikazano — atribut data-text mora se podudarati s vidljivim tekstom elementa da bi efekt radio.

Primjer

Ulaz

Tekst: "GLITCH" · Boja 1: #ff0040 (crvena) · Boja 2: #00fff9 (cijan) · Intenzitet: 5px

Izlaz

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Osnovni tekst ostaje bijel dok dvije kopije njegovih pseudo-elemenata trepere u crvenoj i cijan boji sa strane, stvarajući klasičan izgled oštećenog signala.

Zašto element treba atribut data-text

Pseudo-elementi ::before i ::after ne mogu izravno pročitati redoviti tekstualni sadržaj elementa — CSS content: attr() radi samo sa stvarnim HTML atributima, ne s child tekstualnim čvorovima. Zato generirani HTML ponavlja tekst kao atribut data-text="..." na istom elementu: vidljivi tekst se prikazuje normalno, dok svaki pseudo-element neovisno povlači isti string putem content: attr(data-text) i slaže vlastitu obojenu, animiranu kopiju preko njega.

Kako nastaje treperenje

Svaki pseudo-element animiran je vlastitim @keyframes blokom koji prolazi kroz niz vrijednosti clip-path: inset(...). U svakom keyframeu, otkriva se druga vodoravna traka obojene kopije dok je ostatak odsječen, pa vidljivi isječak crvene (ili cijan) boje skače gore-dolje tijekom animacije — u kombinaciji s pomakom obojene sjene, to djeluje kao poderani, neusklađeni kanali boja umjesto glatkog sjaja.

Gdje se ovaj efekt uklapa

Hero naslovi na gaming, cyberpunk, streaming ili music-brand landing stranicama.
404 / error stranice, gdje glitch pojačava dojam da je 'nešto pukotina'.
Hover ili focus stanja na naslovu ili logotipu za kratak naglasak koji privlači pažnju.
Stanja učitavanja ili 'obrade' gdje glitch prenosi aktivnost sustava.
Koristite umjereno na tekstu tijela — efekt je namjerno teško čitljiv na prvi pogled, pa najbolje radi na kratkim naslovima ili logotipovima, ne na odlomcima.

Kombiniranje s drugim CSS alatima

Glitch naslov često je samo jedan element u širem tamnom, visokokontrastnom layoutu. Kombinirajte ga s mekom sjajnom sjenom ili zaobljenim rubovima kartice iz drugih CSS alata ispod za dovršeniji izgled.

→ Generator box-shadow · Generator border-radius

Često postavljana pitanja

Zašto su crvena i cijan zadane boje?

Crvena i cijan oponašaju klasičnu neusklađenost RGB kanala viđenu u pokvarenom analognom videu i ranim digitalnim greškama signala, odakle izvorno dolazi vizualni jezik efekta 'glitch'. Možete zamijeniti bilo koje dvije boje, ali snažno kontrastne nijanse najjasnije djeluju kao rascjep boja.

Zahtijeva li ovaj efekt JavaScript?

Ne — kad je CSS na vašoj stranici, glitch je čista CSS animacija pokretana pomoću @keyframes. JavaScript koristi samo ovaj alat, u vašem pregledniku, za ažuriranje živog pregleda i generiranje koda za kopiranje.

Zašto se efekt ne pojavljuje kad zalijepim CSS u svoj projekt?

Najčešći uzrok je neusklađen ili nedostajući atribut data-text. Pseudo-elementi prikazuju bilo koji string koji je u data-text="..." na elementu, ne vlastiti tekstualni sadržaj elementa, pa oba moraju biti postavljena i moraju se točno podudarati, uključujući velika i mala slova.

Mogu li ovo primijeniti na naslov poput h1 umjesto diva?

Da — tehnika radi na bilo kojem inline ili block elementu koji prihvaća pseudo-elemente ::before/::after i atribut data-text. Samo primijenite istu klasu i atribut data-text na svoj h1, span ili drugi element umjesto diva.

Hoće li snažan glitch efekt naštetiti pristupačnosti ili SEO-u?

Temeljni tekstualni sadržaj je pravi, označiv tekst, pa ga čitači ekrana i tražilice čitaju normalno bez obzira na vizualnu animaciju. Za korisnike osjetljive na treperenje, razmislite o poštivanju prefers-reduced-motion tako da onemogućite ili usporite animaciju za njih.