dijital dahi: #10 Holografik VIP Dijital Pasaport (HTML, CSS Kodu & AI Promptu)

CANLI ÇALIŞMA ALANI

✦ DIJITAL DAHI VIP 💳

4589 •••• •••• 9920

KART SAHİBİ ALEXANDER V.

SON KULLANMA 12/28

💡 Sağdaki HTML/CSS kodlarını düzenleyerek anında test edebilirsiniz.

💡 Bileşen Analizi & Kullanım Alanları

Bu modern tasarım (Holografik VIP Dijital Pasaport), CSS backdrop-filter: blur() teknolojisi ve yarı saydam renk katmanlarıyla derinlik hissi veren ultra modern bir Glassmorphism (Buzlu Cam) UI bileşenidir.

🚀 Nerelerde ve Nasıl Kullanılır?

Modern SaaS & Landing Page: Web sitenizin hero bölümlerinde veya özellik tanıtım kartlarında premium bir atmosfer sunmak için kullanabilirsiniz.
Kullanıcı Profili & Bilgi Kartları: Üye panellerinde, kripto/finans bakiye widget'larında veya bildirim pencerelerinde sergileyebilirsiniz.
Görsel Üstü Katman: Renkli gradyan veya video arka planların üzerinde estetik ve okunabilir bir ön plan elde etmek için idealdir.

🎨 Özelleştirme & Geliştirici İpuçları:

Bulanıklık (Blur) Derecesi: CSS'teki blur(16px) değerini artırarak daha mat veya azaltarak daha berrak bir cam görünümü elde edebilirsiniz.
Kenarlık Işıltısı: border: 1px solid rgba(255,255,255,0.15) değerini renklendirerek neon cam kenarları oluşturabilirsiniz.

🌐 HTML KODU ✏️ Düzenlenebilir

🎨 CSS KODU ✏️ Düzenlenebilir

.glass-vip-pass {
  width: 100%;                        /* 📏 Genişlik değeri */
  max-width: 320px;                   /* 📏 Maksimum genişlik sınırı */
  padding: 1.5rem;                    /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(255, 255, 255, 0.05));  /* 🌌 Arka plan rengi veya gradyan */
  backdrop-filter: blur(20px);        /* 🔮 Buzlu cam (Glassmorphism) buğulaması */
  border: 1px solid rgba(245, 158, 11, 0.4);  /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  border-radius: 18px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  box-shadow: 0 15px 35px rgba(0,0,0,0.45);  /* 💡 Neon parlama ve derinlik gölgesi */
  transition: all 0.3s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
}
.glass-vip-pass:hover {
  transform: translateY(-5px) rotate(1deg);  /* 🚀 Hareket, büyüme veya eksen kaydırma */
  border-color: #fbbf24;              /* 🎨 Kenarlık rengi */
  box-shadow: 0 20px 45px rgba(245, 158, 11, 0.3);  /* 💡 Neon parlama ve derinlik gölgesi */
}
.vip-top-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  justify-content: space-between;     /* ↔️ Yatay eksende hizalama */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  margin-bottom: 1.5rem;              /* ⚙️ Stil özelliği */
}
.vip-brand {
  font-size: 0.75rem;                 /* 🔤 Metin / Yazı boyutu */
  font-weight: 900;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  color: #fbbf24;                     /* 🎨 Yazı / Metin rengi */
  letter-spacing: 1px;                /* ↔️ Harfler arasındaki aralık */
}
.vip-chip {
  font-size: 1.5rem;                  /* 🔤 Metin / Yazı boyutu */
}
.vip-card-number {
  font-family: monospace;             /* ✍️ Yazı tipi font ailesi */
  font-size: 1.1rem;                  /* 🔤 Metin / Yazı boyutu */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  letter-spacing: 2px;                /* ↔️ Harfler arasındaki aralık */
  margin-bottom: 1.5rem;              /* ⚙️ Stil özelliği */
}
.vip-bottom-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  justify-content: space-between;     /* ↔️ Yatay eksende hizalama */
  border-top: 1px solid rgba(255,255,255,0.1);  /* ⚙️ Stil özelliği */
  padding-top: 0.75rem;               /* ⚙️ Stil özelliği */
}
.vip-holder, .vip-exp {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  flex-direction: column;             /* ↕️ Esnek kutu yönü (Sütun/Satır) */
  font-size: 0.65rem;                 /* 🔤 Metin / Yazı boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
}
.vip-holder strong, .vip-exp strong {
  font-size: 0.78rem;                 /* 🔤 Metin / Yazı boyutu */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  margin-top: 0.2rem;                 /* ⚙️ Stil özelliği */
}

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

🤖 YAPAY ZEKA (AI) PROMPTU ChatGPT / Claude / v0

Bu cam efekti yapay zekaya (ChatGPT, Claude, Cursor veya Gemini) sıfırdan yeniden yazdırmak veya projelerinize özel React/Tailwind bileşenine dönüştürmek için hazır prompt:

Bana modern web standartlarına (HTML5, CSS3) tam uyumlu, şık bir "#10 Holografik VIP Dijital Pasaport" Glassmorphism (Buzlu Cam) bileşeni oluştur.

Gereksinimler:
1. Görsel Tasarım: Koyu arka plan üzerinde cam efekti (backdrop-filter: blur(16px)), yarı saydam renkler (rgba(255, 255, 255, 0.08)), ince cam kenarlığı (border: 1px solid rgba(255, 255, 255, 0.15)) ve yumuşak neon gölgeler.
2. İnteraktif Özellikler: Hover anında cam parlaklığı (glass-glow) ve hafif yukarı süzülme animasyonu.
3. Kod Yapısı: Saf HTML ve CSS formatında, harici kütüphane gerektirmeyen temiz kod.

💡 İpucu: ChatGPT ve Claude içine yapıştırarak doğrudan çalıştırabilirsiniz.

#10 Holografik VIP Dijital Pasaport (HTML, CSS Kodu & AI Promptu)

Kayıtlı Favorilerim