CSS Metin Glitch Oluşturucu

Bu Araç Nedir?

Bir CSS glitch efekti, bir metni ::before ve ::after sözde öğeleriyle iki kez çoğaltarak, her kopyayı renkli bir text-shadow ile hafifçe kaydırarak (klasik olarak kırmızı ve camgöbeği, analog RGB sinyal hatalarını yansıtır) ve her kopyanın clip-path'ini @keyframes ile canlandırarak, her renkli kopyanın farklı yatay dilimlerinin zamanla yanıp sönmesini sağlayarak bozuk bir yayın sinyalinin veya çizik bir VHS kasetinin görünümünü taklit eder.

Teknik, görsel, JavaScript animasyon döngüsü veya canvas gerektirmez — kendi metnini iki kez taşıyan tek bir HTML öğesi üzerine katmanlanmış saf CSS'tir: biri gerçek metin içeriği olarak, diğeri ise sözde öğelerin content: attr(data-text) ile okuduğu bir data-text niteliği aracılığıyla.

Kaynak: CSS Pseudo-Elements Module Level 4, W3C — bu efektin üzerine kurulduğu ::before/::after sözde öğelerini ve attr() işlevini tanımlar.

Neden Kullanmalısınız?

• Canlı animasyonlu önizleme — statik bir maket değil, yazarken ve ayarları düzenlerken gerçek glitch efektini görürsünüz.
• Bağımsız olarak ayarlanabilen iki vurgu rengi; varsayılan olarak klasik kırmızı/camgöbeği ama herhangi bir marka veya temaya göre özelleştirilebilir.
• Yoğunluk kaydırıcısı renkli gölgenin piksel kaymasını, hız kaydırıcısı ise clip-path anahtar kare döngüsünün ne kadar hızlı olduğunu kontrol eder.
• Efekt, görünen metinle eşleşen bir data-text niteliğine bağlı olduğundan hem CSS'i (tam @keyframes bloklarıyla birlikte) hem de gereken tam HTML yapısını kopyalar.
• Saf CSS — sayfanıza eklendikten sonra çalışma zamanında JavaScript gerekmez, yüklenecek harici kütüphane veya görsel yoktur.
• Ücretsiz, kayıt gerektirmez, tamamen tarayıcınızda çalışır.

Nasıl Kullanılır

1. Glitch yapmak istediğiniz metni metin alanına yazın — önizleme anında güncellenir.
2. İki vurgu rengi seçin; klasik varsayılan, retro bir RGB ayrışma görünümü için kırmızı ve camgöbeğidir, ancak kontrastlı herhangi iki renk çalışır.
3. İki renk katmanının ne kadar ayrık durduğunu kontrol etmek için yoğunluk kaydırıcısını ayarlayın — daha yüksek değerler daha agresif bir glitch olarak algılanır.
4. Glitch'in ne kadar hızlı titreştiğini kontrol etmek için hız kaydırıcısını ayarlayın.
5. CSS bloğunu kopyalayıp stil dosyanıza yapıştırın.
6. HTML parçasını olduğu gibi kopyalayıp kullanın — efektin çalışması için data-text niteliğinin öğenin görünen metniyle tam olarak eşleşmesi gerekir.

Örnek

Giriş

Metin: "GLITCH" · Renk 1: #ff0040 (kırmızı) · Renk 2: #00fff9 (camgöbeği) · Yoğunluk: 5px

Çıkış

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

Temel metin beyaz kalırken, sözde öğelerdeki iki kopyası her iki yanda kırmızı ve camgöbeği renginde titreşerek klasik bozuk sinyal görünümünü oluşturur.

Öğenin neden data-text niteliğine ihtiyacı var

::before ve ::after sözde öğeleri bir öğenin normal metin içeriğini doğrudan okuyamaz — CSS'teki content: attr() yalnızca gerçek HTML nitelikleriyle çalışır, alt metin düğümleriyle değil. Bu yüzden oluşturulan HTML, metni aynı öğe üzerinde data-text="..." niteliği olarak tekrar eder: görünen metin normal şekilde render edilirken, her sözde öğe content: attr(data-text) aracılığıyla aynı dizeyi bağımsız olarak alır ve kendi renk kaydırılmış, animasyonlu kopyasını üzerine katmanlar.

Titreme nasıl oluşturulur

Her sözde öğe, bir dizi clip-path: inset(...) değerinde ilerleyen kendi @keyframes bloğuyla canlandırılır. Her anahtar karede, renkli kopyanın farklı bir yatay bandı ortaya çıkarken geri kalanı kırpılır, böylece görünen kırmızı (veya camgöbeği) parçası animasyon oynarken dikey olarak sıçrar — renkli gölge kaymasıyla birleşince bu, yumuşak bir parıltı yerine yırtık, hizasız renk kanalları gibi algılanır.

Bu efekt nerede kullanılır

• Oyun, cyberpunk, yayın veya müzik markası açılış sayfalarında büyük başlıklar.
• 404 / hata sayfaları, burada bir glitch 'bir şeyler bozuldu' temasını güçlendirir.
• Kısa, dikkat çekici bir vurgu için başlık veya logo üzerinde hover ya da focus durumları.
• Sistemin çalıştığını ifade etmek için yükleniyor veya 'işleniyor' durumları.
• Gövde metninde tutumlu kullanın — efekt, bir bakışta okunmasının kasıtlı olarak zor olması için tasarlanmıştır, bu yüzden paragraflar yerine kısa başlıklarda veya logo yazılarında en iyi sonucu verir.

Diğer CSS araçlarıyla eşleştirme

Bir glitch başlığı çoğu zaman daha büyük, koyu, yüksek kontrastlı bir düzenin sadece bir parçasıdır. Daha bitmiş bir görünüm için aşağıdaki diğer CSS araçlarından yumuşak bir parıltı gölgesi veya yuvarlatılmış kart kenarlarıyla birleştirin.

→ Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu

Sıkça Sorulan Sorular