Html & Css İle Etkileşimli Bir Görsel Filtreleme Galerisi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için gelişmiş bir kod editörüne (VS Code gibi) ve modern bir tarayıcıya ihtiyacınız var. 2026 yılı standartları gereği, CSS Grid ve Flexbox gibi güncel yerleşim modellerini kullanacağız. Projenin düzgün çalışması için HTML5 ve CSS3 sözdizimine uyulması kritik önem taşır.

• Modern bir web tarayıcısı (Chrome, Firefox veya Edge).
• Temel düzeyde HTML ve CSS bilgisi.
• Düzenli dosya yapısı: index.html, style.css ve görselleriniz için bir 'images' klasörü.

Adım 1: HTML Yapısını Oluşturma

Filtreleme galerisinin temelini sağlam bir HTML iskeleti oluşturur. Filtreleme butonlarını ve görselleri kapsayan bir yapı kuracağız. Burada 'data-filter' özniteliğini (attribute) kullanarak her görselin hangi kategoriye ait olduğunu tanımlayacağız.

  Tümü
  Doğa
  Mimari



  

  

Bu yapıda, 'data-category' değerleri ile filtre butonlarındaki 'data-filter' değerlerini eşleştireceğiz. Bu, JavaScript tarafında filtreleme mantığını kurarken bize büyük kolaylık sağlayacaktır.

Adım 2: CSS ile Görsel Galeriyi Şekillendirme

Galerinin görsel olarak düzgün görünmesi için CSS Grid kullanmak en verimli yöntemdir. Görsellerin boyutlarını sabitlemek ve geçiş efektlerini (transition) eklemek, kullanıcı deneyimini doğrudan etkiler.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.item {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.item.hide {
  display: none;
}

Burada 'display: none' kullanarak filtrelenmeyen öğeleri gizliyoruz. 'transition' özelliği ise filtreleme sırasında görsellerin yumuşak bir şekilde kaybolup görünmesini sağlar.

Adım 3: JavaScript ile Filtreleme Mantığını Kurma

Html & Css ile etkileşimli bir görsel filtreleme galerisi yaparken, işin mantıksal kısmını JavaScript üstlenir. Kullanıcı bir butona tıkladığında, ilgili kategoride olmayan görsellere 'hide' sınıfını ekleyeceğiz.

const buttons = document.querySelectorAll('.btn');
const items = document.querySelectorAll('.item');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.getAttribute('data-filter');
    items.forEach(item => {
      if (filter === 'all' || item.getAttribute('data-category') === filter) {
        item.classList.remove('hide');
      } else {
        item.classList.add('hide');
      }
    });
  });
});

Bu kod bloğu, her buton tıklamasını dinler ve eşleşen kategorideki öğeleri görünür kılar. 'all' seçeneği tüm öğeleri tekrar görünür hale getirmek için özel bir durum olarak tanımlanmıştır.

Adım 4: Performans ve Optimizasyon İpuçları

Görsel galerilerde performans, kullanıcıların sayfayı terk etmemesi için kritiktir. Çok sayıda görsel kullanıyorsanız 'lazy loading' (tembel yükleme) yöntemini mutlaka uygulamalısınız.

Bu basit HTML özniteliği, tarayıcının görselleri sadece kullanıcı ekranına geldiğinde yüklemesini sağlar. Bu da sayfa açılış hızını ciddi oranda artırır.

Adım 5: Kritik Güvenlik ve Hataları Giderme

Web projelerinde XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Kullanıcıdan veri almadığımız için bu projede risk düşüktür, ancak dış kaynaklı veri çekerken her zaman veriyi temizlemelisiniz.

Güvenlik Uyarısı: Eğer galerinize dışarıdan (API üzerinden) veri çekiyorsanız, gelen veriyi doğrudan HTML'e yazdırmayın. 'textContent' kullanarak XSS açıklarını engelleyin.

Yaygın bir hata, 'data-category' değerlerinin yanlış yazılmasıdır. Konsol üzerinden 'console.log' ile tıklanan butonun değerini kontrol ederek hata ayıklama yapabilirsiniz.

Sıkça Sorulan Sorular

Filtreleme animasyonunu nasıl daha akıcı yapabilirim?

CSS 'opacity' ve 'transform: scale()' özelliklerini kullanarak giriş ve çıkış animasyonlarını daha profesyonel bir seviyeye taşıyabilirsiniz.

Mobil cihazlarda galeri düzeni bozuluyor, ne yapmalıyım?

CSS Grid'deki 'repeat(auto-fit, minmax(250px, 1fr))' yapısı mobil uyumluluğu sağlar. Eğer sorun devam ediyorsa medya sorguları (media queries) ile sütun sayısını manuel olarak ayarlayın.

Çok fazla görselim var, sayfalama (pagination) eklemeli miyim?

Eğer görsel sayısı 50'yi geçiyorsa, filtreleme ile birlikte sayfalama veya 'Daha Fazla Göster' butonları eklemek kullanıcı deneyimini iyileştirir.

Bu yöntemi veritabanı ile kullanabilir miyim?

Evet, ancak bu durumda verileri sunucudan çekmek için bir backend dili (Node.js, Python vb.) kullanmanız ve verileri JSON formatında almanız gerekecektir.

SEO açısından nelere dikkat etmeliyim?

Her görselin 'alt' etiketini mutlaka doldurun. Bu, arama motorlarının görsellerinizi anlamasını sağlar ve erişilebilirlik (accessibility) standartlarını karşılar.

Gelişmiş Filtreleme İçin CSS Grid ve Flexbox Kombinasyonu

Görsel galerinizin düzenini daha esnek hale getirmek için CSS Grid'in yapısal gücü ile Flexbox'ın hizalama yeteneklerini birleştirebilirsiniz. Özellikle farklı boyutlardaki görsellerin bir arada bulunduğu galerilerde, grid-auto-flow: dense özelliği ile boşlukları minimize ederek daha profesyonel bir "masonry" görünümü elde edebilirsiniz.

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 15px;
  padding: 20px;
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

Bu yapı, JavaScript ile filtreleme yaptığınızda öğelerin yeniden konumlanmasını çok daha akıcı bir hale getirir. CSS transition özelliklerini transform ve opacity ile birleştirerek, filtreleme sırasında öğelerin kaybolup yeniden belirmesini yumuşatabilirsiniz.

Görsel Yükleme Performansı İçin "Lazy Loading" Stratejisi

Galeri büyüdükçe, tüm görsellerin aynı anda yüklenmesi sayfa hızını (LCP - Largest Contentful Paint) olumsuz etkiler. Modern tarayıcıların sunduğu yerel loading="lazy" özniteliğini kullanmak, kullanıcı görsellerin bulunduğu bölüme kaydırana kadar veri transferini durdurur.

Ayrıca, görsellerinizi WebP formatında sunmak ve srcset kullanarak ekran çözünürlüğüne göre doğru boyutta görseli çağırmak, kullanıcı deneyimini doğrudan iyileştirir.

Filtreleme Mantığında Hata Ayıklama (Debugging) Teknikleri

Filtreleme sırasında görsellerin yanlış görünmesi veya animasyonların takılması durumunda tarayıcı konsolunu (F12) aktif kullanmalısınız. Özellikle display: none ile display: block geçişlerinde CSS animasyonlarının çalışmadığını fark edebilirsiniz. Bunun nedeni, display özelliğinin animasyon desteklememesidir.

Çözüm: display yerine opacity ve visibility kombinasyonunu kullanın:

.gallery-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: scale(1);
}

.gallery-item.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none; /* Etkileşimi engeller */
  position: absolute;   /* Akıştan çıkarır */
}

Bu yöntemle, öğeler DOM'dan tamamen silinmeden gizlenir ve CSS geçişleri sorunsuz bir şekilde tetiklenir. Hata ayıklarken console.log() ile filtreleme fonksiyonuna gelen kategori değerlerini kontrol ederek, eşleşme mantığınızın (if-else veya filter metodu) doğru çalışıp çalışmadığını her zaman doğrulayın.

Sonuç

Html & Css ile etkileşimli bir görsel filtreleme galerisi oluşturmak, web geliştirme yeteneklerinizi bir üst seviyeye taşıyacak temel bir beceridir. Bu rehberde öğrendiğiniz yöntemleri kullanarak, kendi portfolyo sitelerinizi veya e-ticaret arayüzlerinizi daha etkileşimli hale getirebilirsiniz. Bir sonraki adım olarak, bu galeriye bir "Lightbox" özelliği ekleyerek görsellerin üzerine tıklandığında tam ekran açılmasını sağlamayı deneyebilirsiniz.

Kod güvenliği sorumluluk reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce gerekli güvenlik testlerini yapmanız ve güncel güvenlik kütüphanelerini projenize entegre etmeniz tavsiye edilir.