Temel HTML & CSS: Başlangıç için responsive kart örneği

Bu rehber, HTML ve CSS ile basit, temiz ve mobil uyumlu (responsive) bir kart bileşeni oluşturmayı adım adım gösterir. Amacımız kısa, çalıştırılabilir bir örnek sunmak; ardından kodu açıklayıp geliştirme, erişilebilirlik ve test önerileri vermektir.

Ne öğreneceksiniz?

Kartın temel HTML yapısını kurma
Basit CSS ile görsel stil verme (gölge, yuvarlatma, düğme)
Flexbox ve medya sorgusuyla responsive davranış sağlama
Hover etkileşimleri, erişilebilirlik ve performans ipuçları

Hızlı Başlangıç: Örnek dosyalar

Bu örnek için iki dosya oluşturun: index.html ve styles.css. index.html'i tarayıcıda açtığınızda, kartlar yatayda akış halinde görünür; küçük ekranlarda alt alta geçer.

index.html
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Kart Örneği</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="cards"> <div class="card"> <img src="https://via.placeholder.com/400x200" alt="Ürün görseli"> <div class="card-content"> <h3>Kart Başlığı</h3> <p>Kısa açıklama metni. Bu alan ürün veya gönderi hakkında kısa bilgi sunar.</p> <a href="#">Devamını oku</a> </div> </div> <!-- İhtiyaca göre daha fazla kart ekleyin --> </div> </body> </html>

index.html

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Kart Örneği</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="cards"> <div class="card"> <img src="https://via.placeholder.com/400x200" alt="Ürün görseli"> <div class="card-content"> <h3>Kart Başlığı</h3> <p>Kısa açıklama metni. Bu alan ürün veya gönderi hakkında kısa bilgi sunar.</p> <a href="#">Devamını oku</a> </div> </div>  </div> </body> </html>

styles.css
/* Temel düzen / .cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; } .card { flex: 1 1 280px; max-width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; } .card img { width: 100%; height: auto; display: block; } .card-content { padding: 1rem; } .card h3 { margin: 0 0 .5rem 0; font-size: 1.125rem; } .card p { margin: 0 0 1rem 0; color: #555; line-height: 1.4; } .card a { display: inline-block; padding: .5rem .75rem; background: #0069d9; color: #fff; border-radius: 4px; text-decoration: none; } .card:hover { transform: translateY(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } / Mobil: kartlar tek sütuna geçer */ @media (max-width: 600px) { .card { flex: 1 1 100%; max-width: none; } }

styles.css

/* Temel düzen */ .cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; } .card { flex: 1 1 280px; max-width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; } .card img { width: 100%; height: auto; display: block; } .card-content { padding: 1rem; } .card h3 { margin: 0 0 .5rem 0; font-size: 1.125rem; } .card p { margin: 0 0 1rem 0; color: #555; line-height: 1.4; } .card a { display: inline-block; padding: .5rem .75rem; background: #0069d9; color: #fff; border-radius: 4px; text-decoration: none; } .card:hover { transform: translateY(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } /* Mobil: kartlar tek sütuna geçer */ @media (max-width: 600px) { .card { flex: 1 1 100%; max-width: none; } }

Kodu adım adım açıklama

.cards: Kartları sarmalayan konteyner. display:flex ve flex-wrap ile satır akışı ve sarma kontrol edilir.
.card: Her kartın kapsayıcısı. flex: 1 1 280px kuralı, kartların esnek olduğunu, ancak sıkıştıklarında en az 280px genişlik talep ettiğini belirtir.
Görseller: img yüzde genişlik ile ayarlanır (width:100%), böylece kartın genişliğine uyar.
Medya sorgusu: @media (max-width:600px) ile küçük ekranlarda kartlar tek sütuna geçer ve daha iyi okunur.

İyi uygulama ipuçları

Her görsel için alt etiketi sağlayın; bu erişilebilirlik ve SEO için önemlidir.
Butonlar/a linkleri için klavye odak durumlarını belirtin (örn. outline veya gölgelendirme) böylece kullanıcılar sekme ile de ulaşabilir.
Görselleri optimize edin; gerekiyorsa srcset ve sizes kullanarak farklı ekran yoğunluklarına uygun görüntüler sunun.
Geçişler için kısa süreli transition eklemek kullanıcı deneyimini yumuşatır.

Hover etkileşimi ve odak durumu (örnek)

Kullanıcı fareyle üstüne geldiğinde veya link klavye ile odağa geldiğinde küçük bir yükselme etkisi ekleyebilirsiniz. Aşağıdaki CSS satırları buna örnektir (zira yukarıdaki styles.css içinde yer alır):

.card:hover — kartı hafifçe yukarı taşıma ve gölge arttırma.
Odak için: .card a:focus { outline: 3px solid rgba(0,123,255,0.25); outline-offset: 2px; }

Alternatif düzen: CSS Grid

Flexbox yerine CSS Grid ile otomatik sığdırma yapmak isterseniz, şu küçük kural işinizi görür:

Grid örneği (styles.css)
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 1rem; } /* .card stilleri aynı kalır */

Bu satır, ekrana göre otomatik olarak kaç sütun olacağını belirler; küçük ekranlarda kartlar alt alta gelir, geniş ekranda yan yana yerleşir.

Erişilebilirlik ve performans kontrol listesi

Her img için anlamlı alt metin ekleyin.
Linklerin ve butonların klavye odak (tab) durumlarını görünür yapın.
Renk kontrastını kontrol edin (metin / arkaplan oranı).
Gerektiğinde loading="lazy" ekleyin ve width/height öznitelikleriyle CLS (layout shift) azaltın.
Mobilde dokunmatik hedeflerin yeterli büyüklükte olduğundan emin olun (ör. 44–48px önerisi literatürde yaygındır).

Test & dağıtım checklist

Farklı ekran genişliklerinde manuel test (tarayıcıın geliştirici araçları ile).
Gerçek cihazlarda dokunmatik testleri yapın.
Performans: sayfa yükleme hızını ve görsel boyutlarını kontrol edin.
Erişilebilirlik: klavye ile gezinme ve ekran okuyucu testi yapın.

İleri seviyeye geçiş: etkileşim ve animasyonlar

Daha gelişmiş etkileşimler için parallax, flip-card veya içerik rotasyonu gibi teknikleri araştırabilirsiniz. Bu tür varyasyonlara örnekler ve uygulamalar için kaynaklara bakabilirsiniz; örneğin parallax/flip kart örnekleri Bytewebster adresinde, hover etkileşimleriyle ilgili düzenlemeler ise RUSTCODE üzerinde gösterilmiştir.

Kaynaklar ve ileri okumalar

Codewithrandom — Create Responsive Card Layout Using HTML and CSS (örnek yapı ve açıklamalar için referans).
GitHub Topics — responsive-cards (farklı projeler ve uygulama örnekleri).
Bytewebster — Parallax Flipping Cards (ileri düzey varyasyonlar).
RUSTCODE — Responsive Card With Hover Interactions (hover/etkileşim örnekleri).

Sıkça Sorulan Sorular (SSS)

Kartlar neden bazı ekranlarda üst üste geliyor?

Genellikle bunun nedeni konteynerin veya kartların sabit genişliklerle tanımlanmasıdır. flex: 1 1 280px gibi bir kural, kartların esnek olmasını ve gerektiğinde bir satırdan diğerine taşınmasını sağlar. Alternatif olarak CSS Grid ve minmax() kullanabilirsiniz.

Görsellerin farklı ekranlarda doğru görünmesini nasıl sağlarım?

Görseller için width="100%" height="auto" kullanmak temel çözümdür. Ayrıca srcset ve sizes ile farklı çözünürlüklere uygun dosyalar sunabilirsiniz.

Kartları daha erişilebilir yapmanın en hızlı yolu nedir?

Her görsele anlamlı alt metin ekleyin, link ve butonlara odak durumları tanımlayın ve başlıkları (h3 vb.) doğru kullanın. Erişilebilirlik testleri için otomatik araçların yanında manuel testler de yapın.

Bu örneği projemde nasıl kullanabilirim?

Kodu kopyalayıp kendi HTML/CSS dosyalarınıza yapıştırarak başlayabilirsiniz. Görselleri, renkleri ve yazı tiplerini marka gereksinimlerinize göre özelleştirin. Daha fazla kart veya içerik eklerken düzenin korunmasına dikkat edin.

Not: Örnek, temel bir şablon sunar; gerçek projelerde tarayıcı uyumluluğu, performans ve erişilebilirlik testlerini yapmanız önerilir. Daha derin örnekler ve varyasyonlar için kaynaklardaki uygulamalara bakabilirsiniz.