CSS-tekstihäiriögeneraattori

Tämä työkalu rakentaa animoidun RGB-jakoisen glitch-tekstitehosteen pelkällä CSS:llä käyttäen kahta kaksoiskappaletta pseudoelementtejä, jotka nykivät ja siirtävät väriä tekstisi taakse. Kirjoita tekstisi, valitse kaksi korostusväriä, säädä glitchin voimakkuutta ja nopeutta, katso sen animoituvan live-tilassa, ja kopioi sitten sekä luotu CSS että pieni HTML-rakenne, jonka se tarvitsee.

Mikä tämä työkalu on?

CSS-glitch-tehoste jäljittelee vioittuneen lähetyssignaalin tai revenneen VHS-nauhan ulkonäköä kahdentamalla tekstipätkän ::before- ja ::after-pseudoelementeillä, siirtämällä kutakin kopiota hieman värillisellä text-shadow-ominaisuudella (klassisesti punaisella ja syaanilla, joka kaikuu analogisia RGB-signaalivirheitä) ja animoimalla kunkin kopion clip-path-arvoa @keyframes-säännöllä siten, että kunkin värillisen kopion eri vaakasuuntaiset viipaleet välähtelevät sisään ja ulos ajan mittaan.

Tekniikka ei tarvitse kuvia, JavaScript-animaatiosilmukkaa eikä canvasia — se on puhdasta CSS:ää kerrostettuna yhdelle HTML-elementille, joka kantaa oman tekstinsä kahdesti: kerran varsinaisena tekstisisältönä, ja kerran data-text-attribuutin kautta, jota pseudoelementit lukevat komennolla content: attr(data-text).

Lähde: CSS Pseudo-Elements Module Level 4, W3C — määrittelee ::before/::after-pseudoelementit ja attr()-funktion, joihin tämä tehoste perustuu.

Miksi käyttää sitä?

Live-animoitu esikatselu — näe varsinainen glitch-tehoste kirjoittaessasi ja asetuksia säätäessäsi, ei pelkkää staattista mallikuvaa.
Kaksi itsenäisesti säädettävää korostusväriä, oletuksena klassinen punainen/syaani RGB-jako-ulkonäkö, mutta mukautettavissa mihin tahansa brändiin tai teemaan.
Voimakkuusliukusäädin hallitsee värivarjon siirtymää pikseleinä; nopeusliukusäädin hallitsee kuinka nopeasti clip-path-keyframes-syklit kiertävät.
Kopioi sekä CSS:n (mukaan lukien täydet @keyframes-lohkot) että täsmällisen tarvittavan HTML-rakenteen, sillä tehoste perustuu data-text-attribuuttiin, joka vastaa näkyvää tekstiä.
Puhdas CSS — ei JavaScriptiä ajon aikana kun se on sivullasi, eikä ulkoisia kirjastoja tai kuvia ladattavaksi.
Ilmainen, ei rekisteröitymistä, toimii kokonaan selaimessasi.

Käyttöohje

Kirjoita haluamasi glitch-tekstin tekstikenttään — se päivittää live-esikatselun välittömästi.
Valitse kaksi korostusväriä; klassinen oletus on punainen ja syaani retro RGB-jaon ulkonäköä varten, mutta mitkä tahansa kaksi kontrastista väriä toimivat.
Säädä voimakkuusliukusäädintä hallitaksesi kuinka kaukana kaksi värikerrosta ovat toisistaan — suuremmat arvot näyttävät aggressiivisemmalta glitchiltä.
Säädä nopeusliukusäädintä hallitaksesi kuinka nopeasti glitch välähtelee.
Kopioi CSS-lohko ja liitä se tyylitiedostoosi.
Kopioi HTML-katkelma ja käytä sitä täsmälleen kuten näytetty — data-text-attribuutin on vastattava elementin näkyvää tekstiä, jotta tehoste toimii.

Esimerkki

Syöte

Teksti: "GLITCH" · Väri 1: #ff0040 (punainen) · Väri 2: #00fff9 (syaani) · Voimakkuus: 5px

Tuloste

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

Peruteksti pysyy valkoisena, kun taas sen kaksi pseudoelementtikopiota välähtelevät punaisena ja syaanina kummallakin puolella, tuottaen klassisen vioittuneen signaalin ulkonäön.

Miksi elementti tarvitsee data-text-attribuutin

::before- ja ::after-pseudoelementit eivät voi lukea elementin tavallista tekstisisältöä suoraan — CSS:n content: attr() toimii vain oikeiden HTML-attribuuttien kanssa, ei lapsitekstisolmujen kanssa. Siksi luotu HTML toistaa tekstin data-text="..."-attribuuttina samalla elementillä: näkyvä teksti renderöityy normaalisti, kun taas kumpikin pseudoelementti hakee saman merkkijonon itsenäisesti komennolla content: attr(data-text) ja kerrostaa oman värisiirretyn, animoidun kopionsa päälle.

Miten välähtely tuotetaan

Kumpikin pseudoelementti on animoitu omalla @keyframes-lohkollaan, joka käy läpi sarjan clip-path: inset(...) -arvoja. Jokaisessa keyframessa värillisen kopion eri vaakasuuntainen kaista paljastetaan muun jäädessä leikatuksi pois, joten näkyvä siivu punaista (tai syaania) hyppelee pystysuunnassa animaation edetessä — yhdistettynä värilliseen text-shadow-siirtymään tämä näyttää revenneeltä, väärin kohdistetulta väriltä pehmeän hehkun sijaan.

Mihin tämä tehoste sopii

Herotsikot pelaamis-, kyberpunk-, striimaus- tai musiikkibrändien laskeutumissivuilla.
404-/virhesivut, joissa glitch vahvistaa "jokin meni rikki" -teemaa.
Hover- tai focus-tilat otsikossa tai logossa lyhyeen huomiota herättävään korostukseen.
Lataus- tai "käsittelee"-tilat, joissa glitch viestii järjestelmän toiminnasta.
Käytä säästeliäästi leipätekstissä — tehoste on tarkoituksella vaikeasti luettavissa vilkaisulla, joten se toimii parhaiten lyhyissä otsikoissa tai logotyypissä, ei kappaleissa.

Yhdistäminen muihin CSS-työkaluihin

Glitch-otsikko on usein vain yksi elementti suuremmassa tummassa, korkean kontrastin asettelussa. Yhdistä se pehmeään hehkuvarjoon tai pyöristettyihin korttireunoihin alla olevista muista CSS-työkaluista viimeistellymmän ulkonäön saamiseksi.

→ Box Shadow -generaattori · Border Radius -generaattori

Usein kysytyt kysymykset

Miksi punainen ja syaani ovat oletusvärit?

Punainen ja syaani jäljittelevät klassista RGB-kanavan väärää kohdistusta, jota nähdään vioittuneessa analogisessa videokuvassa ja varhaisissa digitaalisissa signaalivirheissä, mistä "glitch"-tehosteen visuaalinen kieli alun perin juontaa. Voit vaihtaa mitkä tahansa kaksi väriä, mutta voimakkaasti kontrastiset sävyt näyttäytyvät selkeimmin värijakona.

Vaatiiko tämä tehoste JavaScriptiä?

Ei — kun CSS on sivullasi, glitch on puhdas CSS-animaatio, jota ohjaa @keyframes. JavaScriptiä käyttää vain tämä työkalu itse, selaimessasi, päivittääkseen live-esikatselun ja luodakseen kopioitavan koodin.

Miksi tehoste ei näy kun liitän CSS:n projektiini?

Yleisin syy on puuttuva tai väärin täsmäävä data-text-attribuutti. Pseudoelementit renderöivät sen merkkijonon, joka on elementin data-text="..."-attribuutissa, ei elementin omaa tekstisisältöä, joten molemmat on asetettava ja niiden on täsmättävä tarkalleen, myös isot ja pienet kirjaimet mukaan lukien.

Voinko soveltaa tätä otsikkoon kuten h1 div-elementin sijaan?

Kyllä — tekniikka toimii millä tahansa inline- tai lohkoelementillä, joka hyväksyy ::before/::after-pseudoelementit ja data-text-attribuutin. Sovella vain sama luokka ja data-text-attribuutti h1-, span- tai muuhun elementtiin div:n sijaan.

Vahingoittaako voimakas glitch-tehoste saavutettavuutta tai hakukoneoptimointia?

Taustalla oleva tekstisisältö on oikeaa, valittavaa tekstiä, joten ruudunlukuohjelmat ja hakukoneet lukevat sen normaalisti riippumatta visuaalisesta animaatiosta. Vilkkumiselle herkkien käyttäjien osalta kannattaa harkita prefers-reduced-motion-asetuksen kunnioittamista poistamalla tai hidastamalla animaatio näille käyttäjille.