Html & Css İle Özelleştirilebilir Bir Dinamik Fiyatlandırma Kartı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) yeterlidir. 2026 yılı itibarıyla CSS'in sunduğu "CSS Variables" (CSS Değişkenleri) ve "Container Queries" (Kapsayıcı Sorguları) özelliklerini yoğun bir şekilde kullanacağız. Bu özellikler, fiyatlandırma kartınızı sayfanın geri kalanından bağımsız olarak ölçeklendirmenize olanak tanır.

• Modern bir kod editörü (VS Code).
• Temel HTML5 ve CSS3 bilgisi.
• Tarayıcı geliştirici araçlarını (DevTools) kullanma becerisi.

Adım 1: HTML İskeletini Oluşturma

Fiyatlandırma kartının temel yapısını oluştururken semantik (anlamsal) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından hayati önem taşır. Bir fiyatlandırma kartı genellikle başlık, fiyat alanı, özellik listesi ve bir "satın al" butonundan oluşur.

  
Profesyonel Plan
  

    ₺
    299
    /ay
  
  

    
Sınırsız Depolama
    
7/24 Teknik Destek
    
Gelişmiş Analitik
  
  Hemen Başla

Burada kullandığımız div yapısı, kartın ana kapsayıcısıdır. İçeriklerin mantıksal gruplandırılması, ileride CSS ile stil verirken işimizi kolaylaştıracaktır.

Adım 2: CSS Değişkenleri ile Dinamik Yapılandırma

Özelleştirilebilir bir tasarım için CSS değişkenleri kullanmak, renk paletini veya yazı tiplerini tek bir noktadan yönetmenizi sağlar. Bu yöntem, projeniz büyüdüğünde bakım maliyetini düşürür.

:root {
  --primary-color: #2563eb;
  --card-bg: #ffffff;
  --text-color: #1e293b;
  --border-radius: 12px;
  --spacing: 20px;
}

.pricing-card {
  background: var(--card-bg);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
}

Bu kod bloğu, kartın temel görünümünü belirler. Değişkenleri :root içerisinde tanımlayarak, tüm sayfa genelinde tutarlı bir tasarım dili oluşturduk.

Adım 3: Flexbox ile Hizalama ve Düzen

Fiyatlandırma kartı içerisindeki öğelerin dikey olarak hizalanması için Flexbox kullanacağız. Bu, içerik miktarı değişse bile kartın dengeli görünmesini sağlar.

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 300px;
}

.features {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

flex-direction: column özelliği, öğelerin alt alta dizilmesini sağlar. align-items: center ise tüm içeriği yatay eksende ortalar.

Adım 4: Etkileşimli Buton Tasarımı

Kullanıcıyı harekete geçirecek (Call to Action) butonun tasarımı, dönüşüm oranları için kritiktir. Hover (üzerine gelme) efekti ile kullanıcıya tıklanabilir olduğunu hissettirmeliyiz.

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #1d4ed8;
}

Burada transition özelliği kullanarak renk değişiminin yumuşak bir geçişle gerçekleşmesini sağladık. Bu, kullanıcı deneyimini profesyonel bir seviyeye taşır.

Adım 5: Duyarlı (Responsive) Tasarım ve Kapsayıcı Sorguları

2026 standartlarında, kartın sadece ekran boyutuna değil, bulunduğu kapsayıcının boyutuna göre de şekillenmesi beklenir. @container sorguları, kartın farklı sayfa bölümlerinde farklı boyutlarda çalışmasını sağlar.

.pricing-card {
  container-type: inline-size;
}

@container (max-width: 250px) {
  .pricing-card {
    padding: 10px;
  }
  .amount {
    font-size: 1.5rem;
  }
}

Bu yöntem, kartınızı bir sidebar'a veya geniş bir ana sayfaya yerleştirdiğinizde otomatik olarak uyum sağlamasına olanak tanır.

Karşılaştırma Tablosu: Tasarım Yöntemleri

Kritik Güvenlik Uyarısı: HTML ve CSS ile oluşturulan fiyatlandırma kartları görseldir. Fiyat verilerini asla doğrudan HTML içerisinde sabit (hard-coded) bırakıp ödeme işlemlerini sadece istemci tarafında yönetmeyin. Ödeme işlemleri için her zaman güvenli bir backend (PHP, Node.js vb.) kullanın ve fiyatları sunucu tarafında doğrulayın.

Sıkça Sorulan Sorular

CSS değişkenlerini neden kullanmalıyım?

CSS değişkenleri, tasarım sisteminizi merkezi bir noktadan yönetmenizi sağlar. Bir rengi değiştirdiğinizde tüm kartlarınızın rengi otomatik olarak güncellenir.

Bu kartı nasıl daha fazla özelleştirebilirim?

Kartın üzerine bir "En Çok Tercih Edilen" etiketi ekleyebilir veya CSS box-shadow değerlerini değiştirerek derinlik katabilirsiniz.

Mobil cihazlarda görünüm bozuluyor, ne yapmalıyım?

Media query veya container query kullanarak ekran küçüldüğünde yazı boyutlarını ve boşlukları (padding/margin) azaltmayı deneyin.

Erişilebilirlik için nelere dikkat etmeliyim?

Butonlarınızın yeterli kontrast oranına sahip olduğundan emin olun ve ekran okuyucular için uygun HTML yapısını koruyun.

Daha fazla kart eklediğimde hizalama nasıl bozulmaz?

Kartları bir flex-wrap: wrap özelliğine sahip ana kapsayıcı içerisine yerleştirerek ekran genişliğine göre otomatik alt satıra geçmelerini sağlayabilirsiniz.

İleri Düzey İpuçları: Performans ve Optimizasyon

Fiyatlandırma kartlarınızın yüklenme süresini ve tarayıcı performansını iyileştirmek, kullanıcı deneyimini doğrudan etkiler. Özellikle kartlarınızda ikonlar veya özel yazı tipleri kullanıyorsanız, bu öğelerin render edilme süreçlerini optimize etmeniz gerekir.

CSS Performansını Artırma

Modern tarayıcılarda will-change özelliği, animasyonların daha akıcı çalışmasını sağlar. Ancak bu özelliği aşırı kullanmak bellek tüketimini artırabilir. Sadece etkileşim anında tetiklenen hover efektleri için kullanılması önerilir.

.pricing-card {
  transition: transform 0.3s ease;
  will-change: transform;
}

.pricing-card:hover {
  transform: translateY(-10px);
}

Ayrıca, CSS dosyalarınızı küçültmek (minification) ve kritik CSS'i (Critical CSS) HTML dosyanızın kısmına gömmek, "First Contentful Paint" süresini ciddi oranda düşürecektir.

Hata Ayıklama ve Test Süreçleri

Geliştirme aşamasında kartlarınızın farklı ekran boyutlarında nasıl tepki verdiğini anlamak için tarayıcı geliştirici araçlarını (DevTools) etkin kullanmalısınız. Özellikle "Responsive Design Mode" kullanarak farklı cihaz profillerini simüle etmek, tasarım hatalarını erkenden yakalamanızı sağlar.

Yaygın Hata Senaryoları ve Çözümleri

• Taşma (Overflow) Sorunu: Kart içindeki metinler çok uzun olduğunda kartın dışına taşabilir. Bunu word-wrap: break-word; veya overflow-wrap: break-word; ile engelleyebilirsiniz.
• Hizalama Kaymaları: Flexbox kullanırken align-items: stretch; varsayılan değerdir. Eğer kartların yüksekliklerinin eşit olmasını istiyorsanız, kapsayıcıya bu değeri verdiğinizden emin olun.
• Düşük Kontrast: Erişilebilirlik testlerinde (Lighthouse gibi araçlarla) metin ve arka plan renklerinin kontrast oranını kontrol edin. 4.5:1 oranı, standart metinler için minimum gerekliliktir.

Testlerinizi otomatize etmek isterseniz, Playwright veya Cypress gibi araçlarla kartın üzerine gelindiğinde (hover) butonun görünür olup olmadığını kontrol eden basit test senaryoları yazabilirsiniz.

// Örnek bir test mantığı (pseudocode)
test('Fiyatlandırma kartı hover edildiğinde buton görünür olmalı', async ({ page }) => {
  const card = page.locator('.pricing-card');
  await card.hover();
  const button = card.locator('button');
  await expect(button).toBeVisible();
});

Bu yöntemlerle, projenizi sadece görsel olarak değil, teknik açıdan da profesyonel bir seviyeye taşıyabilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir dinamik fiyatlandırma kartı oluşturmak, web geliştirme temellerini pekiştiren harika bir pratik çalışmasıdır. Öğrendiğiniz Flexbox, CSS değişkenleri ve kapsayıcı sorguları, sadece fiyatlandırma kartlarında değil, tüm arayüz bileşenlerinizde kullanabileceğiniz güçlü araçlardır.

Bir sonraki adım olarak, bu kartı bir JavaScript dosyası ile bağlayarak "Aylık" ve "Yıllık" fiyatlandırma arasında geçiş yapabileceğiniz bir "Toggle" (anahtar) mekanizması eklemeyi deneyebilirsiniz. Kodunuzu temiz tutun, semantik yapıya sadık kalın ve modern CSS özelliklerini keşfetmeye devam edin.