Basit HTML & CSS: Kart Tasarımı İçin 7 Kısa Örnek

Bu rehberde, küçük ve etkili kolay kod örnekleri ile 7 farklı kart tasarımını göreceksiniz. Amacımız hızlıca kopyalayıp proje dosyanıza yapıştırabileceğiniz, okunabilir ve responsive html css örnekleri sunmaktır. Kartlar minimalden animasyona, neon parıltısından profile kadar farklı amaçları kapsar.

Not: Responsive düzenler ve modern düzen teknikleri için Flexbox/Grid kullanımı faydalı referanslardır. Etkileşimli hover ve animasyon fikirleri için örnekleri UI Studio sitesinde görebilirsiniz. Neon ve parlak efektler hakkında ilham almak için Neon Glow örnekleri yararlı olacaktır.

1. Temel Kart — Minimal Tasarım

Kısa ve temiz bir kart: başlık + açıklama. Hızlıca yerleştirmek için uygundur.

HTML
<div class="card">
  <h3>Başlık</h3>
  <p>Kısa açıklama.</p>
</div>

CSS
.card { background:#fff; border-radius:8px; padding:16px; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.12); }

  • Kullanım: içerik listeleri, blog kartları.
  • Responsive: .card { max-width:340px; width:100%; } yaparak kapsayıcıya uyum sağlayın.

2. Görsel Odaklı Kart — Üst Görsel

Ürünün ya da gönderinin görselini vurgulamak için kullanılır.

HTML
<div class="card image-card">
  <img src="/path/to.jpg" alt="Ürün görseli">
  <div class="body">
    <h4>Ürün adı</h4>
    <p>Kısa bilgi.</p>
  </div>
</div>

CSS
.image-card img { width:100%; height:auto; display:block; border-top-left-radius:8px; border-top-right-radius:8px; }
.image-card .body { padding:12px; }

  • Tavsiye: görsel boyutlarını mobil için optimize edin; büyük resimler cihazda yavaş yüklenebilir.
  • Erişilebilirlik: <img> için açıklayıcı alt metni ekleyin.

3. Profil Kartı — Avatar ve Bilgi

Kullanıcı profilleri, ekip sayfaları veya küçük biyografi kartları için uygundur.

HTML
<div class="profile-card">
  <img src="/avatar.jpg" alt="Kullanıcı adı">
  <h4>Ad Soyad</h4>
  <p>Kısa pozisyon/özgeçmiş</p>
</div>

CSS
.profile-card { text-align:center; padding:18px; border-radius:10px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.profile-card img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:10px; }

  • Mobil uyum: metin boyutlarını medya sorgularıyla küçük ekranlarda düşürün.
  • Odak (focus) erişilebilirliği için butonlar/profil linklerine görünür odak stili ekleyin.

4. Ürün Kartı — Grid ile Düzen

Birden çok ürünü listelemek için container içinde grid kullanan kart tasarımı örneği. Modern projelerde Flexbox ve Grid esneklik sağlar (bkz: referans).

HTML (container)
<div class="cards">...kartlar burada...</div>

CSS
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }

  • auto-fit + minmax ile kartlar ekran genişliğine göre akıllıca çoğalır/azalır.
  • Her kart içinde küçük görsel, başlık, fiyat ve buton bulunabilir.

5. Hover ile Animasyonlu Kart

Hover ve küçük animasyonlar kartlara derinlik katar. Animasyon örnekleri için ilham almak isterseniz UI Studio sayfasına bakabilirsiniz.

CSS
.card { transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; }
.card:hover { transform:translateY(-12px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.14); }

  • Performans: sadece transform ve opacity ile animasyon yapmak çoğu durumda daha verimlidir.
  • Dokunmatik cihazlarda hover olmayacağını unutmayın; dokunmatik etkileşim için farklı tetikleyiciler düşünün.

6. Neon Parıltılı Kart — Vurgulu Stil

Vurgu kartları, promosyon veya dikkat çekmek istediğiniz içerikler için uygundur. Neon/ışık efekti örnekleri için ilham: Neon Glow.

CSS
.neon-card { background:#0b0f1a; color:#e6f7ff; padding:20px; border-radius:10px; box-shadow:0 0 8px rgba(0,255,255,0.08), 0 0 30px rgba(255,0,200,0.04); border:1px solid rgba(255,255,255,0.04); }
.neon-card h3 { text-shadow:0 2px 8px rgba(0,255,255,0.12); }

  • Kontrast: neon stiller yüksek kontrast gerektirebilir; okunabilirlik test edin.
  • Animasyon eklemek isterseniz kutu gölgesinin opaklığını CSS animasyonla değiştirin.

7. Değişkenlerle (CSS Variables) Esnek Kart

Tek bir kart sınıfını tema değişkenleriyle hızlıca özelleştirin. Bu yöntem hem bakım kolaylığı sağlar hem de farklı renk varyasyonları oluşturmayı kolaylaştırır.

CSS
:root { --card-bg:#fff; --card-radius:12px; --card-shadow:0 8px 20px rgba(0,0,0,0.08); }
.card { background:var(--card-bg); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:16px; }

  • Projede tema değiştirme (ör. dark/light) için CSS değişkenleri kullanın.
  • JavaScript ile değişkenleri runtime'da değiştirmek, interaktif temalar için uygundur.

Hızlı Uygulama Adımları

  1. HTML yapısını oluşturun: semantik başlık ve paragraf etiketleri kullanın.
  2. Tek bir ortak .card sınıfı yaratın ve ortak stilleri buraya koyun.
  3. Grid veya Flexbox ile kart container düzenini kurun (bkz: Flexbox/Grid örnekleri).
  4. Görselleri boyutlandırın ve responsive için srcset veya modern görüntü servisleri kullanın.
  5. Performans: gereksiz gölge/filtre kullanımını sınırlayın ve CSS dosyalarını minify edin.

Erişilebilirlik ve Test Kontrol Listesi

  • Renk kontrastını kontrol edin; metin her zaman okunur olmalı.
  • Görseller için açıklayıcı alt metin ekleyin.
  • Klavyeyle gezinti: kart içindeki linkler ve butonlar odaklanabilir olmalı.
  • Mobil test: farklı ekran boyutlarında kartların kırılmadığından emin olun.

Bu örnekler küçük projeler, prototipler veya eğitim amaçlı çalışmalarda kullanılmak üzere hazırlandı. Daha fazla varyasyon ve animasyon örnekleri için kaynaklardaki koleksiyonlara göz atabilirsiniz (örnek koleksiyon: GitHub - cards-craft).

Son not: Kodları canlı siteye almadan önce tarayıcı konsolu ve mobil test araçlarıyla deneyin; gerektiğinde küçük ayarlar yaparak görsel uyumu sağlayın.