← Tüm Yazılar

Modern CSS Teknikleri

📅 20 Aralık 2024 ⏱️ 5 dakika okuma 🏷️ CSS, Frontend

Modern web geliştirme dünyasında CSS, artık sadece renk ve font değiştirmekten çok daha fazlasını yapabiliyor. Bu yazıda, günümüzün en güçlü CSS tekniklerini inceleyeceğiz.

1. CSS Custom Properties (CSS Değişkenleri)

CSS değişkenleri, stil sayfalarınızda yeniden kullanılabilir değerler tanımlamanıza olanak tanır. Tema değişikliği yapmak artık çok kolay!

CSS 
:root {
  --primary-color: #8b5cf6;
  --bg-color: #0a0a0f;
  --text-color: #ffffff;
  --spacing-md: 1rem;
}

/* Kullanımı */
.button {
  background: var(--primary-color);
  padding: var(--spacing-md);
  color: var(--text-color);
}

/* Tema değişikliği */
:root.light {
  --bg-color: #ffffff;
  --text-color: #0a0a0f;
}

2. CSS Grid Layout

CSS Grid, karmaşık iki boyutlu layoutlar oluşturmak için en güçlü araçtır. Satır ve sütunları kolayca yönetebilirsiniz.

CSS 
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Responsive grid */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* Named grid areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

3. Flexbox

Tek boyutlu layoutlar için Flexbox hala en iyi seçenektir. Öğeleri hizalamak ve dağıtmak için mükemmel.

CSS 
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Responsive wrap */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-wrap > * {
  flex: 1 1 300px;
}

4. Modern Animasyonlar

CSS animasyonları ile kullanıcı deneyimini zenginleştirebilirsiniz.

CSS 
/* Yumuşak geçişler */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Keyframe animasyonları */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate {
  animation: fadeInUp 0.6s ease forwards;
}

5. Glassmorphism Efekti

Modern UI tasarımlarında popüler olan cam efekti:

CSS 
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
}

Sonuç

Modern CSS, web geliştirmede inanılmaz olanaklar sunuyor. CSS Grid ve Flexbox ile layout sorunlarını, Custom Properties ile tema yönetimini, animasyonlar ile kullanıcı deneyimini çözebilirsiniz. Bu teknikleri projelerinizde kullanarak daha modern ve sürdürülebilir kodlar yazabilirsiniz.

Önerilen Kaynaklar: