Generator CSS glitch besedila

Kaj je to orodje?

CSS učinek glitch posnema videz pokvarjenega oddajnega signala ali strgane VHS kasete tako, da podvoji kos besedila z uporabo psevdo-elementov ::before in ::after, vsako kopijo rahlo odmakne z obarvano senco besedila (klasično rdečo in cian, kar spominja na napake analognega RGB signala), in animira clip-path vsake kopije z @keyframes, tako da različni vodoravni deli vsake obarvane kopije utripajo skozi čas.

Tehnika ne potrebuje slik, JavaScript animacijske zanke ali platna — je čist CSS na enem HTML elementu, ki nosi svoje besedilo dvakrat: enkrat kot pravo besedilno vsebino in enkrat prek atributa data-text, ki ga psevdo-elementi berejo z content: attr(data-text).

Vir: CSS Pseudo-Elements Module Level 4, W3C — definira psevdo-elementa ::before/::after in funkcijo attr(), na katerih temelji ta učinek.

Zakaj ga uporabiti?

• Živi animiran predogled — poglej dejanski učinek glitcha, ko tipkaš in prilagajaš nastavitve, ne le statičen prikaz.
• Dve neodvisno prilagodljivi poudarjeni barvi, privzeto klasičen rdeč/cian RGB-razcep videz, a prilagodljivi za katero koli znamko ali temo.
• Drsnik intenzivnosti nadzoruje odmik barvne sence v pikslih; drsnik hitrosti nadzoruje, kako hitro se cikli clip-path keyframes izvajajo.
• Kopira tako CSS (vključno s polnimi bloki @keyframes) kot natančno potrebno HTML strukturo, saj je učinek odvisen od atributa data-text, ki se ujema z vidnim besedilom.
• Čist CSS — brez JavaScripta med izvajanjem, ko je enkrat na tvoji strani, in brez zunanjih knjižnic ali slik za nalaganje.
• Brezplačno, brez prijave, deluje v celoti v tvojem brskalniku.

Kako ga uporabljati

1. Vtipkaj besedilo, ki ga želiš imeti kot glitch, v besedilno polje — takoj posodobi živi predogled.
2. Izberi dve poudarjeni barvi; klasična privzeta izbira je rdeča in cian za retro RGB-razcep videz, a delujeta poljubni dve kontrastni barvi.
3. Prilagodi drsnik intenzivnosti, da nadzoruješ, kako daleč narazen sta dve barvni plasti — višje vrednosti delujejo kot agresivnejši glitch.
4. Prilagodi drsnik hitrosti, da nadzoruješ, kako hitro glitch utripa.
5. Kopiraj blok CSS in ga prilepi v svojo tabelo slogov.
6. Kopiraj HTML odlomek in ga uporabi natanko tako, kot je prikazan — atribut data-text se mora ujemati z vidnim besedilom elementa, da učinek deluje.

Primer

Vnos

Besedilo: "GLITCH" · Barva 1: #ff0040 (rdeča) · Barva 2: #00fff9 (cian) · Intenzivnost: 5px

Rezultat

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

Osnovno besedilo ostane belo, medtem ko njegovi dve kopiji psevdo-elementov utripata v rdeči in cian barvi na obeh straneh, kar ustvari klasičen videz pokvarjenega signala.

Zakaj element potrebuje atribut data-text

Psevdo-elementa ::before in ::after ne moreta neposredno prebrati navadne besedilne vsebine elementa — CSS content: attr() deluje samo z dejanskimi HTML atributi, ne z otroškimi besedilnimi vozlišči. Zato ustvarjeni HTML ponovi besedilo kot atribut data-text="..." na istem elementu: vidno besedilo se izriše normalno, medtem ko vsak psevdo-element neodvisno pridobi isti niz prek content: attr(data-text) in nanj naloži svojo barvno premaknjeno, animirano kopijo.

Kako se ustvari utripanje

Vsak psevdo-element je animiran s svojim blokom @keyframes, ki se pomika skozi vrsto vrednosti clip-path: inset(...). Pri vsakem keyframe se razkrije drugačen vodoravni pas obarvane kopije, medtem ko je ostalo odrezano, tako da vidni delček rdeče (ali cian) barve skoči navpično, ko se animacija predvaja — v kombinaciji z obarvanim odmikom sence besedila to deluje kot strgani, neusklajeni barvni kanali namesto gladkega sijaja.

Kje se ta učinek uporablja

• Naslovi junaka na pristajalnih straneh za igre, cyberpunk, pretakanje ali glasbene znamke.
• Strani 404 / napak, kjer glitch okrepi temo 'nekaj se je pokvarilo'.
• Stanja ob prehodu miške ali fokusu na naslovu ali logotipu za kratek poudarek, ki pritegne pozornost.
• Stanja nalaganja ali 'obdelave', kjer glitch prikazuje aktivnost sistema.
• Uporabljaj zmerno na telesnem besedilu — učinek je namenoma težko berljiv na prvi pogled, zato deluje najbolje na kratkih naslovih ali logotipih, ne na odstavkih.

Kombiniranje z drugimi CSS orodji

Naslov z glitchem je pogosto le en element v večji temni, visoko kontrastni postavitvi. Kombiniraj ga z mehko sijočo senco ali zaobljenimi robovi kartice iz drugih CSS orodij spodaj za bolj dovršen videz.

→ Generator box-shadow · Generator border-radius

Pogosta vprašanja