dijital dahi: Buzlu Cam Müzik Çalar Widgetı (HTML, CSS Kodu & AI Promptu)

CANLI ÇALIŞMA ALANI

🎵

Cyberpunk Horizon

Neon Dreams · 2026

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

🌐 HTML KODU ✏️ Düzenlenebilir

🎨 CSS KODU ✏️ Düzenlenebilir

.glass-player-card {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Tam genişlik */
  max-width: 320px;                   /* 📏 Maksimum genişlik sınırı */
  /* 📏 Maksimum genişlik */
  padding: 1.5rem;                    /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ Kart iç boşluğu */
  background: rgba(255, 255, 255, 0.04);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Şeffaf cam zemin */
  backdrop-filter: blur(18px);        /* 🔮 Buzlu cam (Glassmorphism) buğulaması */
  /* 🔮 Buğulama filtresi */
  -webkit-backdrop-filter: blur(18px);  /* 🔮 Safari için cam buğulama desteği */
  /* 🔮 Safari buğulama */
  border: 1px solid rgba(236, 72, 153, 0.3);  /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Pembe neon cam kenarlık */
  border-radius: 20px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Yuvarlak köşeler */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);  /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Zemin gölgesi */
  transition: all 0.3s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
  /* ⏱️ Geçiş */
}
.glass-player-card:hover {
  transform: translateY(-5px);        /* 🚀 Hareket, büyüme veya eksen kaydırma */
  /* 🚀 Kartı kaldır */
  border-color: #ec4899;              /* 🎨 Kenarlık rengi */
  /* 🎨 Pembe hover kenarlığı */
  box-shadow: 0 20px 45px rgba(236, 72, 153, 0.25);  /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Neon parlama */
}
.player-top {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Yan yana albüm ve şarkı */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikeyde ortala */
  gap: 0.85rem;                       /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Boşluk */
  margin-bottom: 1rem;                /* ⚙️ Stil özelliği */
  /* 📐 Alt boşluk */
}
.album-art-glass {
  width: 48px;                        /* 📏 Genişlik değeri */
  /* 📏 Albüm kapağı genişliği */
  height: 48px;                       /* 📐 Yükseklik değeri */
  /* 📐 Albüm kapağı yüksekliği */
  background: linear-gradient(135deg, #ec4899, #8b5cf6);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Gradyan kapak */
  border-radius: 12px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Kapak köşe yuvarlama */
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 İçerik ortalama */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortalama */
  justify-content: center;            /* ↔️ Yatay eksende hizalama */
  /* ↔️ Yatay ortalama */
  font-size: 1.3rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 İkon boyutu */
}
.track-title {
  font-size: 0.95rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Şarkı adı boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın yazı */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Beyaz metin */
  margin: 0 0 0.2rem 0;               /* 📐 Dış kenar boşluğu */
  /* 📐 Dış boşluk */
}
.track-artist {
  font-size: 0.75rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Sanatçı adı boyutu */
  color: #ec4899;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Pembe neon ton */
}
.sound-wave-bars {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Çubuklar yan yana */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortala */
  justify-content: center;            /* ↔️ Yatay eksende hizalama */
  /* ↔️ Ortaya topla */
  gap: 4px;                           /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Çubuklar arası boşluk */
  height: 24px;                       /* 📐 Yükseklik değeri */
  /* 📐 Dalga alanı yüksekliği */
  margin-bottom: 1rem;                /* ⚙️ Stil özelliği */
  /* 📐 Alt boşluk */
}
.sound-wave-bars .bar {
  width: 4px;                         /* 📏 Genişlik değeri */
  /* 📏 Çubuk kalınlığı */
  background: #ec4899;                /* 🌌 Arka plan rengi veya gradyan */
  /* 🎨 Çubuk rengi */
  border-radius: 2px;                 /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Uçları yuvarla */
  animation: waveAnim 1s ease-in-out infinite alternate;  /* 🎬 Sürekli çalışan animasyon döngüsü */
  /* 🎬 Dalgalanma */
}
.bar-1 {
  height: 8px;                        /* 📐 Yükseklik değeri */
  animation-delay: 0.1s;              /* ⚙️ Stil özelliği */
}
.bar-2 {
  height: 18px;                       /* 📐 Yükseklik değeri */
  animation-delay: 0.3s;              /* ⚙️ Stil özelliği */
}
.bar-3 {
  height: 12px;                       /* 📐 Yükseklik değeri */
  animation-delay: 0.2s;              /* ⚙️ Stil özelliği */
}
.bar-4 {
  height: 22px;                       /* 📐 Yükseklik değeri */
  animation-delay: 0.4s;              /* ⚙️ Stil özelliği */
}
.bar-5 {
  height: 14px;                       /* 📐 Yükseklik değeri */
  animation-delay: 0.15s;             /* ⚙️ Stil özelliği */
}
.bar-6 {
  height: 9px;                        /* 📐 Yükseklik değeri */
  animation-delay: 0.35s;             /* ⚙️ Stil özelliği */
}
@keyframes waveAnim {
  0% {
  transform: scaleY(0.4);             /* 🚀 Hareket, büyüme veya eksen kaydırma */
  opacity: 0.5;                       /* 🌫️ Saydamlık / Görünürlük oranı */
}
100% {
  transform: scaleY(1.2);             /* 🚀 Hareket, büyüme veya eksen kaydırma */
  opacity: 1;                         /* 🌫️ Saydamlık / Görünürlük oranı */
}

}
.player-progress-bar {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Tam genişlik */
  height: 4px;                        /* 📐 Yükseklik değeri */
  /* 📐 İnce bar yüksekliği */
  background: rgba(255, 255, 255, 0.1);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Arka plan barı */
  border-radius: 2px;                 /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Yuvarlama */
  overflow: hidden;                   /* ✂️ Dışa taşan ışık veya efektleri gizle */
  /* ✂️ Taşan dolguyu kes */
  margin-bottom: 1rem;                /* ⚙️ Stil özelliği */
  /* 📐 Alt boşluk */
}
.progress-fill {
  width: 60%;                         /* 📏 Genişlik değeri */
  /* 📏 Çalan kısım yüzdesi */
  height: 100%;                       /* 📐 Yükseklik değeri */
  /* 📐 Tam yükseklik */
  background: #ec4899;                /* 🌌 Arka plan rengi veya gradyan */
  /* 🎨 Pembe neon dolgu */
}
.player-controls {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Düğmeler yan yana */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortalama */
  justify-content: center;            /* ↔️ Yatay eksende hizalama */
  /* ↔️ Ortaya topla */
  gap: 1.25rem;                       /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Düğmeler arası boşluk */
}
.player-ctrl-btn {
  background: none;                   /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Şeffaf zemin */
  border: none;                       /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Kenarlıksız */
  font-size: 1.1rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 İkon boyutu */
  cursor: pointer;                    /* 👆 Farenin tıklanabilir el imleci */
  /* 👆 İmleç */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Gri renk */
}
.player-play-btn {
  width: 40px;                        /* 📏 Genişlik değeri */
  /* 📏 Çalma butonu genişliği */
  height: 40px;                       /* 📐 Yükseklik değeri */
  /* 📐 Çalma butonu yüksekliği */
  background: #ec4899;                /* 🌌 Arka plan rengi veya gradyan */
  /* 🎨 Pembe dolgu */
  border: none;                       /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Kenarlıksız */
  border-radius: 50%;                 /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Tam yuvarlak */
  font-size: 1rem;                    /* 🔤 Metin / Yazı boyutu */
  /* 🔤 İkon boyutu */
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Ortalama */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortala */
  justify-content: center;            /* ↔️ Yatay eksende hizalama */
  /* ↔️ Yatay ortala */
  cursor: pointer;                    /* 👆 Farenin tıklanabilir el imleci */
  /* 👆 İmleç */
  box-shadow: 0 0 15px #ec4899;       /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Neon parlama */
}

⚡ 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 "Buzlu Cam Müzik Çalar Widgetı" 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.

Buzlu Cam Müzik Çalar Widgetı (HTML, CSS Kodu & AI Promptu)

Cyberpunk Horizon

Kayıtlı Favorilerim