Glitch Generator

Cilësimet e tekstit

60px
5

Opsionet e eksportit

Pamje paraprake e drejtpërdrejtë

Efekti i gabimit
Kodi i Gjeneruar
/* CSS for your glitch effect */ .your-glitch-class { position: relative; color: #000000; font-size: 60px; font-weight: bold; } .your-glitch-class::before, .your-glitch-class::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .your-glitch-class::before { left: 2px; text-shadow: -1px 0 #00CEFF; animation: glitch-anim 2s infinite linear alternate-reverse; } .your-glitch-class::after { left: -2px; text-shadow: -1px 0 #FF2E63; animation: glitch-anim2 3s infinite linear alternate-reverse; opacity: 0.7; } @keyframes glitch-anim { 0% { clip: rect(42px, 9999px, 28px, 0); } 20% { clip: rect(62px, 9999px, 58px, 0); } 40% { clip: rect(33px, 9999px, 37px, 0); } 60% { clip: rect(59px, 9999px, 71px, 0); } 80% { clip: rect(1px, 9999px, 14px, 0); } 100% { clip: rect(42px, 9999px, 73px, 0); } } @keyframes glitch-anim2 { 0% { clip: rect(25px, 9999px, 50px, 0); } 20% { clip: rect(33px, 9999px, 44px, 0); } 40% { clip: rect(70px, 9999px, 90px, 0); } 60% { clip: rect(2px, 9999px, 14px, 0); } 80% { clip: rect(60px, 9999px, 76px, 0); } 100% { clip: rect(42px, 9999px, 50px, 0); } }

Glitch Examples

CYBERPUNK

Stili Cyberpunk

Perfekt për tituj lojërash, postera dhe çdo gjë që ka nevojë për atë nuancë futuriste.

Defekt i fortë
HACKED

Estetika e Hakerit

Krijoni një pamje ndërhyrëse dhe jofunksionale për dizajnet me temë sigurie.

Defekt i fortë
LOJË RETRO

Lojëra Retro

Stili i lojës nostalgjike të viteve '80/'90 me një kthesë moderne të gabimeve.

Problem i mesëm
BROKEN

Mosfunksionim dixhital

Simuloni një ekran dixhital të korruptuar ose të dëmtuar.

Gabim Kaotik
SUBTLE

Gabim i vogël

Një efekt më i rafinuar i gabimeve për dizajne profesionale që kanë nevojë për një prekje mprehtësie.

Problem i butë
ERROR 404

Ekrani i Gabimit

Krijo një faqe gabimesh që tërheq vëmendjen me një ndjesi gabimi teknik.

Problem i sistemit

How to Use

Udhëzues Zbatimi

1
Gjeneroni gabimin tuaj

Përdor kontrollet për të personalizuar efektin e gabimit. Rregullo tekstin, madhësinë, intensitetin dhe ngjyrat për të krijuar pamjen perfekte.

2
Kopjoni Kodin e Gjeneruar

Klikoni butonat "Kopjo CSS" dhe "Kopjo HTML" për të marrë kodin për efektin tuaj të gabimit.

3
Shto në Projektin tënd

Ngjit CSS-në në fletën tënde të stilit dhe HTML-në në shabllonin tënd ku dëshiron të shfaqet efekti.

4
Personalizo më tej

Modifikoni kohëzgjatjet, ngjyrat ose pozicionet e animacionit në CSS për të përshtatur efektin për nevojat tuaja specifike të dizajnit.

Pyetje të Shpeshta

A është kjo e pajtueshme me të gjithë shfletuesit?

The glitch effect uses modern CSS features (CSS animations and text-shadow) which are supported in all modern browsers. Internet Explorer does not fully support these features.

A mund ta përdor këtë komercialisht?

Po, kodi i gjeneruar është falas si për përdorim personal ashtu edhe për komercial. Nuk kërkohet atribuim.

Si ta rregulloj intensitetin e gabimit?

Rrëshqitësi i intensitetit kontrollon shpejtësinë e animacionit dhe distancën e hijeve të tekstit. Vlerat më të larta krijojnë një efekt gabimi më të theksuar.

A mund ta përdor këtë me fontet e mia?

Absolutisht! Gjeneratori ofron kodin kryesor të efektit të gabimit. Mund ta aplikoni në çdo tekst duke përdorur fontin tuaj të preferuar duke modifikuar vetitë e fontit CSS.

Pse nuk po funksionon efekti i gabimit në faqen time?

Sigurohuni që CSS dhe HTML juaj të jenë zbatuar saktë. Elementi duhet të ketë njëdata-textatribut që përputhet me tekstin e dukshëm. Kontrolloni gjithashtu për çdo konflikt CSS që mund të anashkalojë stilet e gabimeve.

About This Tool

Ky Gjenerator i Efekteve të Tekstit CSS Glitch ju lejon të krijoni efekte mahnitëse dhe të personalizueshme të gabimeve për projektet tuaja në internet. Perfekt për t'i shtuar një prekje të guximshme dhe futuriste titujve, logove ose çdo elementi teksti.

Karakteristikat kryesore

Plotësisht i personalizueshëm

Rregullo çdo aspekt të efektit të gabimit që të përputhet me vizionin tënd të dizajnit.

Dalja e Kodit të Pastër

Merrni CSS dhe HTML të formatuar mirë, gati për prodhim, të cilat mund t’i integroni lehtësisht.

Pamje paraprake e drejtpërdrejtë

Shikoni saktësisht se si do të duket efekti juaj i gabimit ndërsa bëni rregullime.

Dizajn i Përgjegjshëm

Efektet e gabimeve të gjeneruara funksionojnë bukur në të gjitha madhësitë e ekranit.

Eksporti i SVG-së

Shkarko tekstin e gabimit si SVG për ta përdorur në mjete të tjera dizajni.

Kontrolli i Ngjyrave

Zgjidhni ngjyra të personalizuara për tekstin bazë dhe mbivendosjet e gabimeve.

Krijuar medhe teknologjitë moderne të internetit. Nuk kërkohen biblioteka JavaScript - vetëm magji e pastër e CSS-së.

Related Tools

Konvertuesi më pak në CSS

Transformoni kodin tuaj Less në CSS. Shpejt, lehtë dhe sigurt.

Konvertuesi i stilolapsit në CSS

Transformoni kodin tuaj SCSS në CSS. Shpejt, lehtë dhe sigurt.

Gjeneroni transformime CSS3 me lehtësi

Një mjet i fuqishëm dhe intuitiv për krijimin e transformimeve komplekse CSS3 pa shkruar kod. Vizualizoni ndryshimet në kohë reale dhe kopjoni CSS-në e gjeneruar për ta përdorur në projektet tuaja.

Konvertoni tekstin midis shkronjave të mëdha dhe të mëdha

Transformoni lehtësisht tekstin tuaj në stile të ndryshme të shkronjave dhe shkronjave me anë të mjetit tonë të gjithanshëm për konvertimin e shkronjave dhe shkronjave.

Konvertuesi i Njësisë së Frekuencës

Konvertoni midis njësive të ndryshme të frekuencës me saktësi për llogaritjet tuaja inxhinierike dhe shkencore

Mjeti i Kodimit Base64

Kodimizoni tekstin në formatin Base64 me lehtësi, direkt në shfletuesin tuaj.