Gölge ve kenarlık

Karta gölge ve kenarlık ekleyerek derinlik verirsin.

Gölge ve kenarlık

Bu derste .card bölümüne gölge ve kenarlık ekleyeceksin. Bu iki özellik karta derinlik ve çerçeve verir.

box-shadow kartın altına bir gölge çizer. Değerler sırayla yatay kayma, dikey kayma, bulanıklık ve renk olarak yazılır: 0 4px 12px rgba(0,0,0,0.08). border kısa yazımı kenarlığın kalınlığını, biçimini ve rengini tek satırda verir: 1px solid #e2e8f0.

Gölge değeri

box-shadow değeri dört bölümden oluşur: yatay kayma, dikey kayma, bulanıklık yarıçapı ve renk. Örnek: 0 4px 12px rgba(0,0,0,0.08).

Yatay kayma 0 olduğunda gölge kartın tam altına düşer. Dikey kayma 4px gölgeyi aşağı taşır. Bulanıklık 12px gölgeyi yumuşak yapar. Renk rgba(0,0,0,0.08) çok hafif siyah verir; böylece gölge bağırıcı olmaz. Birden çok gölgeyi virgülle ayırarak yazabilirsin.

Uygulama .card bölümüne gölge ve kenarlık ekle

Önceki dersin dosyasını al. .card bölümüne iki yeni bildirim ekle: border: 1px solid #e2e8f0 ve box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08).

Örnek çözümü göster

/* Ayşe Tasarım - Portföy kartı */

.card {
  width: 320px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-hero {
  background-image: url("kapak.jpg");
  background-size: cover;
  height: 140px;
}

.card-title {
  color: #2a3d66;
  font-family: Georgia, serif;
}

Kendini test et

Hangisi geçerli bir border kısa yazımıdır?
```
.card {
  /* ? */
}
```
- border-color: #e2e8f0
- border-style: solid
- border-image: 1px
- border: 1px solid #e2e8f0
Cevabı göster

border: 1px solid #e2e8f0 — Doğru. border kısa yazımı sırayla kalınlık, biçim ve renk verir: 1px solid #e2e8f0.

.card gölge rengini tamamla

.card {
  box-shadow: 0 4px 12px ____;
}

Cevabı göster

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Gölge değerlerini anlamlarıyla eşleştir

0

yatay kayma
4px

dikey kayma
12px

bulanıklık
rgba(0,0,0,0.08)

gölge rengi

Sıradaki ders: Proje sonu - Portföy kartı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler