Δημιουργός CSS Glitch Κειμένου

Αυτό το εργαλείο δημιουργεί ένα κινούμενο εφέ glitch κειμένου με διαχωρισμό RGB από καθαρό CSS, χρησιμοποιώντας δύο διπλά pseudo-elements που τρεμοπαίζουν και μετατοπίζουν το χρώμα πίσω από το κείμενό σας. Πληκτρολογήστε το κείμενό σας, επιλέξτε δύο χρώματα, ρυθμίστε την ένταση και την ταχύτητα του glitch, παρακολουθήστε την ζωντανή κίνηση, και αντιγράψτε τόσο το παραγόμενο CSS όσο και τη μικρή δομή HTML που χρειάζεται.

Τι είναι αυτό το εργαλείο;

Ένα CSS εφέ glitch προσομοιώνει την εμφάνιση ενός κατεστραμμένου σήματος εκπομπής ή μιας σκισμένης κασέτας VHS, διπλασιάζοντας ένα κομμάτι κειμένου χρησιμοποιώντας τα pseudo-elements ::before και ::after, μετατοπίζοντας ελαφρώς κάθε αντίγραφο με ένα έγχρωμο text-shadow (κλασικά κόκκινο και κυανό, που παραπέμπουν σε αναλογικά σφάλματα σήματος RGB), και κάνοντας animate το clip-path κάθε αντιγράφου με @keyframes ώστε διαφορετικές οριζόντιες λωρίδες κάθε έγχρωμου αντιγράφου να αναβοσβήνουν με την πάροδο του χρόνου.

Η τεχνική δεν χρειάζεται εικόνες, κύκλο animation JavaScript ή canvas — είναι καθαρό CSS πάνω σε ένα μόνο στοιχείο HTML που φέρει το δικό του κείμενο δύο φορές: μία ως πραγματικό περιεχόμενο κειμένου, και μία μέσω ενός attribute data-text που τα pseudo-elements διαβάζουν με content: attr(data-text).

Πηγή: CSS Pseudo-Elements Module Level 4, W3C — ορίζει τα pseudo-elements ::before/::after και τη συνάρτηση attr() στα οποία βασίζεται αυτό το εφέ.

Γιατί να το χρησιμοποιήσετε;

Ζωντανή κινούμενη προεπισκόπηση — δείτε το πραγματικό εφέ glitch καθώς πληκτρολογείτε και ρυθμίζετε, όχι μόνο ένα στατικό mockup.
Δύο ανεξάρτητα ρυθμιζόμενα χρώματα, με προεπιλογή το κλασικό κόκκινο/κυανό RGB-split, αλλά προσαρμόσιμα σε οποιοδήποτε brand ή θέμα.
Το slider έντασης ελέγχει τη μετατόπιση της έγχρωμης σκιάς σε pixel· το slider ταχύτητας ελέγχει πόσο γρήγορα κυκλώνουν τα keyframes του clip-path.
Αντιγράφει τόσο το CSS (συμπεριλαμβανομένων ολόκληρων των blocks @keyframes) όσο και την ακριβή δομή HTML που χρειάζεται, καθώς το εφέ εξαρτάται από ένα attribute data-text που ταιριάζει με το ορατό κείμενο.
Καθαρό CSS — καθόλου JavaScript απαιτείται κατά την εκτέλεση μόλις μπει στη σελίδα σας, και καμία εξωτερική βιβλιοθήκη ή εικόνα προς φόρτωση.
Δωρεάν, χωρίς εγγραφή, λειτουργεί εξ ολοκλήρου στον browser σας.

Πώς χρησιμοποιείται

Πληκτρολογήστε το κείμενο που θέλετε να έχει glitch στο πεδίο κειμένου — ενημερώνει αμέσως τη ζωντανή προεπισκόπηση.
Επιλέξτε δύο χρώματα· η κλασική προεπιλογή είναι κόκκινο και κυανό για μια retro εμφάνιση RGB-split, αλλά λειτουργούν οποιαδήποτε δύο χρώματα με αντίθεση.
Ρυθμίστε το slider έντασης για να ελέγξετε πόσο μακριά βρίσκονται τα δύο έγχρωμα layers — υψηλότερες τιμές δίνουν πιο έντονο glitch.
Ρυθμίστε το slider ταχύτητας για να ελέγξετε πόσο γρήγορα τρεμοπαίζει το glitch.
Αντιγράψτε το CSS block και επικολλήστε το στο stylesheet σας.
Αντιγράψτε το απόσπασμα HTML και χρησιμοποιήστε το ακριβώς όπως φαίνεται — το attribute data-text πρέπει να ταιριάζει με το ορατό κείμενο του στοιχείου για να λειτουργήσει το εφέ.

Παράδειγμα

Είσοδος

Κείμενο: "GLITCH" · Χρώμα 1: #ff0040 (κόκκινο) · Χρώμα 2: #00fff9 (κυανό) · Ένταση: 5px

Έξοδος

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

Το βασικό κείμενο παραμένει λευκό ενώ τα δύο αντίγραφα pseudo-element τρεμοπαίζουν σε κόκκινο και κυανό εκατέρωθεν, παράγοντας την κλασική εμφάνιση κατεστραμμένου σήματος.

Γιατί το στοιχείο χρειάζεται attribute data-text

Τα pseudo-elements ::before και ::after δεν μπορούν να διαβάσουν απευθείας το κανονικό περιεχόμενο κειμένου ενός στοιχείου — το CSS content: attr() λειτουργεί μόνο με πραγματικά attributes HTML, όχι με child text nodes. Γι' αυτό το παραγόμενο HTML επαναλαμβάνει το κείμενο ως attribute data-text="..." στο ίδιο στοιχείο: το ορατό κείμενο εμφανίζεται κανονικά, ενώ κάθε pseudo-element αντλεί ανεξάρτητα το ίδιο string μέσω content: attr(data-text) και τοποθετεί από πάνω το δικό του, με μετατοπισμένο χρώμα, κινούμενο αντίγραφο.

Πώς παράγεται το τρεμόπαιγμα

Κάθε pseudo-element έχει το δικό του block @keyframes που περνά από μια σειρά τιμών clip-path: inset(...). Σε κάθε keyframe, μια διαφορετική οριζόντια λωρίδα του έγχρωμου αντιγράφου αποκαλύπτεται ενώ το υπόλοιπο αποκόπτεται, οπότε η ορατή λωρίδα κόκκινου (ή κυανού) πηδάει κάθετα καθώς παίζει το animation — σε συνδυασμό με τη μετατόπιση της έγχρωμης σκιάς, αυτό διαβάζεται ως σκισμένα, ασυμμετρικά κανάλια χρώματος αντί για μια ομαλή λάμψη.

Πού ταιριάζει αυτό το εφέ

Επικεφαλίδες hero σε σελίδες προορισμού για gaming, cyberpunk, streaming ή μουσικές μάρκες.
Σελίδες 404 / σφάλματος, όπου ένα glitch ενισχύει το θέμα "κάτι χάλασε".
Καταστάσεις hover ή focus σε μια επικεφαλίδα ή λογότυπο για μια σύντομη, εντυπωσιακή πινελιά.
Καταστάσεις φόρτωσης ή "επεξεργασίας" όπου ένα glitch μεταφέρει δραστηριότητα συστήματος.
Χρησιμοποιήστε το με φειδώ σε κείμενο σώματος — το εφέ είναι σκόπιμα δύσκολο να διαβαστεί με μια ματιά, οπότε λειτουργεί καλύτερα σε σύντομες επικεφαλίδες ή λογότυπα, όχι παραγράφους.

Συνδυασμός με άλλα εργαλεία CSS

Μια επικεφαλίδα glitch είναι συχνά απλώς ένα στοιχείο σε μια μεγαλύτερη σκούρα, υψηλής αντίθεσης διάταξη. Συνδυάστε τη με μια απαλή λάμψη σκιά ή στρογγυλεμένες άκρες κάρτας από τα άλλα εργαλεία CSS παρακάτω για μια πιο ολοκληρωμένη εμφάνιση.

→ Δημιουργός Box Shadow · Δημιουργός Border Radius

Συχνές ερωτήσεις

Γιατί το κόκκινο και το κυανό είναι τα προεπιλεγμένα χρώματα;

Το κόκκινο και το κυανό μιμούνται την κλασική αναντιστοιχία καναλιών RGB που εμφανίζεται σε κατεστραμμένο αναλογικό βίντεο και πρώιμα σφάλματα ψηφιακού σήματος, από όπου προέρχεται αρχικά η οπτική γλώσσα του εφέ "glitch". Μπορείτε να βάλετε οποιαδήποτε δύο χρώματα, αλλά αποχρώσεις με έντονη αντίθεση διαβάζονται πιο καθαρά ως διαχωρισμός χρωμάτων.

Απαιτεί αυτό το εφέ JavaScript;

Όχι — μόλις το CSS μπει στη σελίδα σας, το glitch είναι ένα καθαρό CSS animation βασισμένο σε @keyframes. Η JavaScript χρησιμοποιείται μόνο από αυτό το εργαλείο, στον browser σας, για να ενημερώνει τη ζωντανή προεπισκόπηση και να παράγει τον αντιγράψιμο κώδικα.

Γιατί το εφέ δεν εμφανίζεται όταν επικολλώ το CSS στο project μου;

Η πιο συνηθισμένη αιτία είναι ένα attribute data-text που δεν ταιριάζει ή λείπει. Τα pseudo-elements εμφανίζουν ό,τι string υπάρχει στο data-text="..." του στοιχείου, όχι το δικό του περιεχόμενο κειμένου, οπότε και τα δύο πρέπει να είναι ορισμένα και να ταιριάζουν ακριβώς, συμπεριλαμβανομένων κεφαλαίων/πεζών.

Μπορώ να το εφαρμόσω σε μια επικεφαλίδα όπως h1 αντί για div;

Ναι — η τεχνική λειτουργεί σε οποιοδήποτε inline ή block στοιχείο που δέχεται pseudo-elements ::before/::after και attribute data-text. Απλώς εφαρμόστε την ίδια κλάση και attribute data-text στο h1, span ή άλλο στοιχείο σας αντί για div.

Θα βλάψει ένα έντονο εφέ glitch την προσβασιμότητα ή το SEO;

Το υποκείμενο περιεχόμενο κειμένου είναι πραγματικό, επιλέξιμο κείμενο, οπότε οι screen readers και οι μηχανές αναζήτησης το διαβάζουν κανονικά ανεξάρτητα από το οπτικό animation. Για χρήστες ευαίσθητους σε αναβοσβήνουσα κίνηση, σκεφτείτε να σεβαστείτε το prefers-reduced-motion απενεργοποιώντας ή επιβραδύνοντας το animation για αυτούς τους χρήστες.