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