CSS teksta glitch ģenerators

Kas ir šis rīks?

CSS glitch efekts imitē bojāta apraides signāla vai saplēstas VHS lentes izskatu, teksta gabalu dublējot divreiz, izmantojot ::before un ::after pseido-elementus, katru kopiju nedaudz nobīdot ar krāsainu text-shadow (klasiski sarkanu un ciānu, atsaucoties uz analogā RGB signāla kļūdām), un animējot katras kopijas clip-path ar @keyframes, lai dažādas katras krāsotās kopijas horizontālas joslas laika gaitā mirgotu.

Šai tehnikai nav vajadzīgi attēli, JavaScript animācijas cikls vai canvas — tas ir tīrs CSS, kas uzlikts vienam HTML elementam, kurš pats satur tekstu divreiz: vienreiz kā reālu teksta saturu un vienreiz caur data-text atribūtu, ko pseido-elementi nolasa ar content: attr(data-text).

Avots: CSS Pseudo-Elements Module Level 4, W3C — definē ::before/::after pseido-elementus un attr() funkciju, uz kuras šis efekts ir balstīts.

Kāpēc to izmantot?

• Tiešraides animēts priekšskatījums — redzi faktisko glitch efektu, rakstot un pielāgojot iestatījumus, nevis tikai statisku maketu.
• Divas neatkarīgi pielāgojamas akcentkrāsas, pēc noklusējuma klasiskais sarkans/ciāns RGB sadalījuma izskats, bet pielāgojams jebkuram zīmolam vai tēmai.
• Intensitātes slīdnis kontrolē krāsu ēnas nobīdi pikseļos; ātruma slīdnis kontrolē, cik ātri cikliski mainās clip-path atslēgas kadri.
• Kopē gan CSS (ieskaitot pilnus @keyframes blokus), gan precīzu nepieciešamo HTML struktūru, jo efekts ir atkarīgs no data-text atribūta, kas sakrīt ar redzamo tekstu.
• Tīrs CSS — pēc ievietošanas lapā izpildlaikā JavaScript nav nepieciešams, nav ārēju bibliotēku vai attēlu, kas jāielādē.
• Bezmaksas, bez reģistrācijas, darbojas pilnībā tavā pārlūkā.

Kā to lietot

1. Ieraksti tekstu, ko vēlies izglitizēt, teksta laukā — tas uzreiz atjaunina tiešraides priekšskatījumu.
2. Izvēlies divas akcentkrāsas; klasiskais noklusējums ir sarkans un ciāns retro RGB sadalījuma izskatam, bet der jebkuras divas kontrastējošas krāsas.
3. Pielāgo intensitātes slīdni, lai kontrolētu, cik tālu viena no otras atrodas abas krāsu kārtas — augstākas vērtības rada agresīvāku glitch iespaidu.
4. Pielāgo ātruma slīdni, lai kontrolētu, cik ātri glitch mirgo.
5. Kopē CSS bloku un ielīmē to savā stila failā.
6. Kopē HTML fragmentu un izmanto to precīzi tā, kā parādīts — data-text atribūtam jāsakrīt ar elementa redzamo tekstu, lai efekts darbotos.

Piemērs

Ievade

Teksts: "GLITCH" · Krāsa 1: #ff0040 (sarkana) · Krāsa 2: #00fff9 (ciāna) · Intensitāte: 5px

Izvade

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

Pamatteksts paliek balts, kamēr tā divas pseido-elementu kopijas mirgo sarkanā un ciānā katrā pusē, radot klasisko bojāta signāla izskatu.

Kāpēc elementam nepieciešams data-text atribūts

::before un ::after pseido-elementi nevar tieši nolasīt elementa parasto teksta saturu — CSS content: attr() strādā tikai ar īstiem HTML atribūtiem, nevis pēcteču teksta mezgliem. Tāpēc ģenerētais HTML atkārto tekstu kā data-text="..." atribūtu tajā pašā elementā: redzamais teksts renderējas normāli, kamēr katrs pseido-elements neatkarīgi izvelk to pašu virkni caur content: attr(data-text) un uzliek savu krāsaino, animēto kopiju virsū.

Kā tiek radīts mirgojums

Katrs pseido-elements ir animēts ar savu @keyframes bloku, kas iet cauri virknei clip-path: inset(...) vērtību. Katrā atslēgas kadrā tiek atklāta cita krāsotās kopijas horizontāla josla, kamēr pārējais tiek apgriezts, tāpēc sarkanā (vai ciānas) redzamā šķautne lēkā vertikāli animācijas laikā — kombinācijā ar krāsaino text-shadow nobīdi tas rada saplēstas, nesaskaņotas krāsu joslas iespaidu, nevis gludu spīdumu.

Kur šis efekts der

• Virsraksti spēļu, kiberpanka, straumēšanas vai mūzikas zīmolu galvenajās lapās.
• 404 / kļūdu lapas, kur glitch pastiprina 'kaut kas salūza' tēmu.
• Peles novietojuma vai fokusa stāvokļi virsrakstam vai logotipam kā īss uzmanību piesaistošs akcents.
• Ielādes vai 'apstrādes' stāvokļi, kur glitch pauž sistēmas aktivitāti.
• Izmanto ar mēru pamattekstam — efekts ir tīši grūti lasāms uzmetumā, tāpēc tas labāk darbojas īsiem virsrakstiem vai logotipa tekstam, nevis rindkopām.

Kombinēšana ar citiem CSS rīkiem

Glitch virsraksts bieži ir tikai viens elements lielākā tumšā, augsta kontrasta izkārtojumā. Kombinē to ar mīkstu spīduma ēnu vai noapaļotām kartes malām no citiem CSS rīkiem zemāk pabeigtākam izskatam.

→ Box Shadow ģenerators · Border Radius ģenerators

Biežāk uzdotie jautājumi