CSS İleri Konular

Geçiş Efektleri (Transitions)

.buton {
    background: #06d6a0;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buton:hover {
    background: #05b587;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.4);
}

CSS Animasyonları

@keyframes kayma {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.animasyonlu {
    animation: kayma 0.6s ease forwards;
}

@keyframes nabiz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.nabiz { animation: nabiz 2s infinite; }

CSS Değişkenleri (Custom Properties)

:root {
    --ana-renk: #06d6a0;
    --arkaplan: #0a0f1a;
    --metin: #e2e8f0;
    --kenar-radius: 10px;
}

.kart {
    background: var(--arkaplan);
    color: var(--metin);
    border-radius: var(--kenar-radius);
    border: 1px solid var(--ana-renk);
}

Pseudo-sınıflar ve Pseudo-elemanlar

/* Pseudo-sınıflar */
a:hover { color: #06d6a0; }
a:visited { color: purple; }
li:first-child { font-weight: bold; }
li:nth-child(even) { background: #f0f0f0; }
input:focus { border-color: #06d6a0; }

/* Pseudo-elemanlar */
.baslik::before { content: "📌 "; }
.alinti::after { content: " — Yazar"; font-style: italic; }
p::first-letter { font-size: 2em; color: #06d6a0; }