Glassmorphism Kartı

Modern web tasarımında popüler olan “Glassmorphism” (Buzlu Cam) efektini barındıran bir kart bileşenidir. Arka plan bulanıklığı (backdrop-filter), yarı saydam bir arka plan rengi ve ince bir kenarlık harmanlanarak şık ve derinlik hissi veren bir kullanıcı arayüzü elde edilir.

Glassmorphism

Bu, Glassmorphism tarzı bir karttır. Arka planın güzel bir şekilde yarı saydam görünmesini sağlayarak, içeriğin havada süzüldüğü izlenimi veren estetik bir görsel efekt sunar.

Kullanım

Aşağıdaki kodu kopyalayarak projenize kolayca dahil edebilirsiniz.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      Bu, Glassmorphism tarzı bir karttır. Arka planın güzel bir şekilde yarı saydam görünmesini sağlayarak, içeriğin havada süzüldüğü izlenimi veren estetik bir görsel efekt sunar.
    </p>
  </div>
</div>

/* Arka Plan (Demo amaçlı) */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Glassmorphism Kartı Ana Gövdesi */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

Özellikler

Estetik Saydamlık ve Bulanıklık: backdrop-filter: blur() özelliği kullanılarak gerçekçi bir buzlu cam dokusu oluşturulmuştur.
Üç Boyutlu Görünüm: Yarı saydam kenarlıklar ve alt gölge (drop shadow) bir araya getirilerek öğenin arka plandan ayrıştığı hissi verilir.
Yüksek Uyumluluk: Arka planda degrade (gradient) veya herhangi bir görsel yer alsa dahi, bulunduğu ortama otomatik olarak uyum sağlayarak estetik bir görünüm sunar.