Animasyonlu Puantiye Arka Plan

Bu, hafif ve temiz bir puantiyeli desen çizmek için CSS’nin “radyal degradesini” kullanan bir arka plan bileşenidir. Herhangi bir resim kullanmadığından hızlı yüklenir ve tamamen özelleştirilebilir.

Kullanım Durumları ve Özellikler

• LP ve kahraman bölümü: Ana görselin arka planı olarak, modern bir izlenim vermeyecek kadar güçlü olmayan bir hareket ekleyin.
• Kartlar ve modeller için arka plan: Basit, tek renkli bir arka plandan sıkıldığınızda mükemmel bir vurgu.
• Performans: Resim (SVG veya PNG) yüklenmeden yalnızca CSS ile tamamlandığı için LCP (En Büyük İçerikli Boya) üzerinde olumsuz bir etkisi yoktur.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

• Hafif animasyon: Statik bir sayfaya derinlik ve ritim kazandırmak amacıyla çapraz olarak yavaşça hareket etmek için “dönüştürme”yi kullanın.
• Vinyet efekti: Desen merkezde açıkça görülebilmektedir ve kenarlara doğru arka plan rengiyle karışan katman (“radyal degrade”), yukarıya yerleştirilen metnin ve içeriğin görünürlüğünü artırır.
• Karanlık mod uyumlu: :global(.dark) sınıfını ve medya sorgularını kullanarak arka plan rengini ve nokta rengini sorunsuz bir şekilde değiştirmek için tasarlanmıştır.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

Yalnızca CSS değişkenlerini değiştirerek noktaların boyutunu ve aralığını kolayca ayarlayabilirsiniz.

• --dot-size: nokta yarıçapı (örneğin, 2px onu büyütür)
• --dot-space: Noktalar arasındaki boşluk (ör. 32px yoğunluğu azaltır)
• --dot-color-light / --dot-color-dark: Nokta rengini değiştirin. Tema renginize uygun bir açık renk seçmenizi öneririz.

Uygulama kodu (Uygulama)

export const PolkaDotBackground: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
return (
  <div className="polka-container relative w-full min-h-[400px] flex items-center justify-center overflow-hidden bg-slate-50 dark:bg-slate-950">
    {/* Polka Dot Pattern */}
    <div className="polka-dots absolute inset-0"></div>
    
    {/* Vignette Overlay */}
    <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(248,250,252,0.85)_100%)] dark:bg-[radial-gradient(circle_at_center,transparent_0%,rgba(2,6,23,0.85)_100%)]"></div>
    
    {/* Content */}
    <div className="relative z-10">
      {children}
    </div>
  </div>
);
};

Tarayıcı Desteği

Tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) tam olarak desteklenir. GPU hızlandırmalı ‘dönüştürme’ kullanılarak canlandırıldığından, kaydırma yaparken veya diğer ağır işlemleri gerçekleştirirken bile çok sorunsuz çalışır.