CSS
Proje sonu - Dashboard
Tüm parçaları birleştirip dashboard'u tamamlarsın.
Proje sonu: parlatma vakti
Son derse geldik. Panele iki parlatma dokunuşu ekleyeceğiz: geçişler (transition) ve bölüm yorumları. Geçişler, KPI kartlarının üzerine gelince hafifçe yukarı kalkmasını ve tablo satırlarının rengini yumuşakça değiştirmesini sağlar.
Yorumlar ise stil sayfasını bölümlere ayırır; böylece dosyayı açan kişi her bölümün ne işe yaradığını hemen görür. Bunlar projeyi bitiren son dokunuşlardır.
transition ile yumuşak geçiş
Bir özelliğin değişmesini yumuşakça görmek için transition bildirimini kullanırız. Şu dört parça gerekir: transition-property (hangi özellik), transition-duration (ne kadar sürer), transition-timing-function (hangi eğri) ve transition-delay (gecikme).
Bunları tek tek yazmak yerine kısa yazım da var: transition: transform 0.2s ease. Burada özellik transform, süre 0.2s, eğri ease. Geçiş, kartı üzerine gelince devreye girer.
Bölüm yorumları ile düzen
Stil sayfası büyüdükçe bölümleri yorumlarla ayırmak okunurluğu artırır. CSS yorumu /* ... */ biçiminde yazılır; tarayıcı bunları görmez, yalnızca kaynağı okuyan kişiye açıktır.
Her bölüme bir başlık yorumu koy: tema değişkenleri, düzen, KPI kartları ve veri tablosu. Böylece dosya tek bakışta anlaşılır.
Uygulama Son dokunuşlar: geçişler ve bölüm yorumları
Mevcut stil sayfasına şu parlatmaları ekle. Önce .kpi-card bölümüne bir transition bildirimi ekle (ör. transition: transform 0.2s ease). Sonra yeni bir .kpi-card:hover bölümü aç ve transform: translateY(-2px) ver. .data-table tbody tr:hover bölümüne de bir transition bildirimi ekle. Son olarak stil sayfasına en az üç bölüm yorumu ekle (ör. tema değişkenleri, düzen, KPI kartları, veri tablosu).
Örnek çözümü göster
/* Satış Paneli stil sayfası - nihai sürüm */
/* Tema değişkenleri */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}
/* Düzen: grid ile sidebar, üst bilgi ve içerik */
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
/* KPI kartları: flex ile yan yana, otomatik sarma */
.kpi-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.kpi-card {
background: var(--card-bg);
padding: 16px;
transition: transform 0.2s ease;
}
.kpi-card:hover {
transform: translateY(-2px);
}
/* Veri tablosu: çerçeve birleştirme, zebraya ve satır vurgusu */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 10px;
border-bottom: 1px solid #e5e9f0;
text-align: left;
}
.data-table tbody tr:nth-child(even) {
background: #f9fafc;
}
.data-table tbody tr:hover {
background: #eaf2ff;
transition: background 0.2s ease;
}
Kendini test et
-
Bir geçişin yumuşak görünmesi için en uygun zamanlama işlevi genelde hangisidir?
- ease
- linear
- step-end
- cubic-bezier(0,1,1,0)
Cevabı göster
ease — Doğru. ease başlangıç ve bitişte yavaşlar, ortada hızlanır; arayüz geçişleri için klasik seçimdir.
-
Kartın dönüşümünü 0.2 saniye ease ile geçir
.kpi-card {
background: var(--card-bg);
padding: 16px;
____;
}
.kpi-card:hover {
transform: translateY(-2px);
}
Cevabı göster
.kpi-card {
background: var(--card-bg);
padding: 16px;
transition: transform 0.2s ease;
}
.kpi-card:hover {
transform: translateY(-2px);
}
-
Bildirimleri görevleriyle eşleştir
- display: grid
- panel iskeleti
- display: flex
- KPI kartları
- border-collapse
- veri tablosu
- transition
- yumuşak geçiş
Sıradaki ders: Meydan okuma - Animasyonlu hero
