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