dijital dahi: SaaS Pro Fiyatlandırma Cam Kartı (HTML, CSS Kodu & AI Promptu)

CANLI ÇALIŞMA ALANI

🔥 EN ÇOK TERCİH EDİLEN

Pro Geliştirici

$ 29 / ay

Büyüyen ekipler ve profesyonel projeler için sınırsız güç.

✓ Sınırsız API İstekleri
✓ 100+ Glassmorphism Bileşeni
✓ 7/24 Öncelikli Canlı Destek
✓ Özel Domain ve CDN Desteği

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

💡 Bileşen Analizi & Kullanım Alanları

Bu modern tasarım (SaaS Pro Fiyatlandırma Cam Kartı), 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-pricing-card {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Kart genişliği */
  max-width: 320px;                   /* 📏 Maksimum genişlik sınırı */
  /* 📏 Maksimum genişlik sınırı */
  padding: 1.75rem 1.5rem;            /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ Kart iç boşluğu */
  background: rgba(255, 255, 255, 0.05);  /* 🌌 Arka plan rengi veya gradyan */
  /* 🌌 Buzlu cam zemin */
  backdrop-filter: blur(16px);        /* 🔮 Buzlu cam (Glassmorphism) buğulaması */
  /* 🔮 Cam buğulama filtresi */
  -webkit-backdrop-filter: blur(16px);  /* 🔮 Safari için cam buğulama desteği */
  /* 🔮 Safari desteği */
  border: 1px solid rgba(16, 185, 129, 0.35);  /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Parlayan zümrüt 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 */
  position: relative;                 /* 📍 Konumlandırma referansı (Relative/Absolute) */
  /* 📍 Popüler rozeti için çıpa */
  transition: all 0.3s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
  /* ⏱️ Geçiş */
}
.glass-pricing-card:hover {
  transform: translateY(-6px);        /* 🚀 Hareket, büyüme veya eksen kaydırma */
  /* 🚀 Kartı kaldır */
  border-color: #10b981;              /* 🎨 Kenarlık rengi */
  /* 🎨 Zümrüt yeşili kenarlık */
  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.25);  /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Neon yeşil ışıma */
}
.pricing-popular-badge {
  position: absolute;                 /* 📍 Konumlandırma referansı (Relative/Absolute) */
  /* 📍 Üste ortala */
  top: -12px;                         /* ⬆️ Üstten mesafe */
  /* ⬆️ Üstten taşır */
  left: 50%;                          /* ⬅️ Soldan mesafe */
  /* ↔️ Yarıya getir */
  transform: translateX(-50%);        /* 🚀 Hareket, büyüme veya eksen kaydırma */
  /* ↔️ Tam ortala */
  background: #10b981;                /* 🌌 Arka plan rengi veya gradyan */
  /* 🟢 Yeşil zemin */
  color: #090a10;                     /* 🎨 Yazı / Metin rengi */
  /* 🌑 Koyu yazı rengi */
  font-size: 0.68rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Rozet yazı boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Ekstra kalın */
  padding: 0.25rem 0.75rem;           /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ Rozet iç boşluğu */
  border-radius: 20px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Tam yuvarlak */
  letter-spacing: 0.5px;              /* ↔️ Harfler arasındaki aralık */
  /* ↔️ Harf aralığı */
}
.pricing-tier-name {
  font-size: 1.25rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Plan adı boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın yazı */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Beyaz başlık */
  margin: 0.5rem 0 0.5rem 0;          /* 📐 Dış kenar boşluğu */
  /* 📐 Dış boşluklar */
}
.pricing-price-row {
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Fiyat dizilimi */
  align-items: baseline;              /* ↕️ Dikey eksende hizalama */
  /* ↕️ Taban hizalaması */
  gap: 0.2rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Rakam aralığı */
  margin-bottom: 0.5rem;              /* ⚙️ Stil özelliği */
  /* 📐 Alt boşluk */
}
.pricing-curr {
  font-size: 1.3rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Dolar simgesi boyutu */
  color: #10b981;                     /* 🎨 Yazı / Metin rengi */
  /* 🟢 Yeşil simge */
  font-weight: 700;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın simge */
}
.pricing-val {
  font-size: 2.2rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Fiyat rakam boyutu */
  font-weight: 900;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Ekstra kalın */
  color: #ffffff;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Parlak beyaz */
  letter-spacing: -1px;               /* ↔️ Harfler arasındaki aralık */
  /* ↔️ Rakam sıkıştırma */
}
.pricing-period {
  font-size: 0.85rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Ay/yıl boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Gri metin */
}
.pricing-summary {
  font-size: 0.8rem;                  /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Özet metin boyutu */
  color: #94a3b8;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Soluk gri */
  margin-bottom: 1.25rem;             /* ⚙️ Stil özelliği */
  /* 📐 Liste öncesi boşluk */
  line-height: 1.4;                   /* ↕️ Satır aralığı / yüksekliği */
  /* ↕️ Satır aralığı */
}
.pricing-features {
  list-style: none;                   /* ⚙️ Stil özelliği */
  /* 🚫 Madde imini kaldır */
  padding: 0;                         /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* 📐 Sıfır dolgu */
  margin: 0 0 1.5rem 0;               /* 📐 Dış kenar boşluğu */
  /* 📐 Alt boşluk */
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 Dikey liste */
  flex-direction: column;             /* ↕️ Esnek kutu yönü (Sütun/Satır) */
  /* ↕️ Sütun dizilimi */
  gap: 0.6rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Maddeler arası boşluk */
}
.pricing-features li {
  font-size: 0.82rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Madde yazı boyutu */
  color: #e2e8f0;                     /* 🎨 Yazı / Metin rengi */
  /* 🎨 Açık gri metin */
  display: flex;                      /* 📐 Düzen ve dizilim yapısı */
  /* 📐 İkon ve yazı yan yana */
  align-items: center;                /* ↕️ Dikey eksende hizalama */
  /* ↕️ Dikey ortalama */
  gap: 0.5rem;                        /* 🔲 İç elemanlar arasındaki boşluk */
  /* 🔲 Onay ikonu aralığı */
}
.check-icon {
  color: #10b981;                     /* 🎨 Yazı / Metin rengi */
  /* 🟢 Yeşil onay ikonu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın onay */
}
.pricing-cta-btn {
  width: 100%;                        /* 📏 Genişlik değeri */
  /* 📏 Tam genişlik */
  padding: 0.75rem;                   /* ↔️ İç boşluk ayarı (Dikey Yatay) */
  /* ↔️ Buton iç boşluğu */
  background: #10b981;                /* 🌌 Arka plan rengi veya gradyan */
  /* 🟢 Canlı yeşil dolgu */
  color: #090a10;                     /* 🎨 Yazı / Metin rengi */
  /* 🌑 Koyu metin rengi */
  border: none;                       /* 🔲 Kenarlık çizgisi (Kalınlık / Tip / Renk) */
  /* 🔲 Kenarlıksız */
  border-radius: 10px;                /* 🔘 Köşe yumuşatma / yuvarlama */
  /* 🔘 Köşe yuvarlama */
  font-size: 0.88rem;                 /* 🔤 Metin / Yazı boyutu */
  /* 🔤 Buton yazı boyutu */
  font-weight: 800;                   /* 🖋️ Yazı kalınlığı (Bold/Normal) */
  /* 🖋️ Kalın yazı */
  cursor: pointer;                    /* 👆 Farenin tıklanabilir el imleci */
  /* 👆 Tıklanabilir imleç */
  transition: all 0.2s ease;          /* ⏱️ Yumuşak geçiş süresi ve eğrisi */
  /* ⏱️ Tepki süresi */
}
.pricing-cta-btn:hover {
  box-shadow: 0 0 20px #10b981;       /* 💡 Neon parlama ve derinlik gölgesi */
  /* 💡 Buton yeşil 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 "SaaS Pro Fiyatlandırma Cam Kartı" 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.

SaaS Pro Fiyatlandırma Cam Kartı (HTML, CSS Kodu & AI Promptu)

Pro Geliştirici

Kayıtlı Favorilerim