Kopyala, yapıştır, renkleri değiştir. Ek kütüphane gerekmez.
<div class="sahne">
<article class="kart">
<span class="etiket">YENİ</span>
<h3>SiberNöbet Kartı</h3>
<p>Cam efektli, hafif gölgeli ve üzerine gelince yükselen modern kart.</p>
<a class="buton" href="#">İncele →</a>
</article>
</div>
.sahne {
min-height: 100vh; display: grid; place-items: center;
background: radial-gradient(circle at 20% 20%, #00f0a855, transparent 40%),
radial-gradient(circle at 80% 70%, #00a6ff55, transparent 40%), #070b10;
font-family: system-ui, sans-serif;
}
.kart {
width: min(340px, 90vw); padding: 28px; border-radius: 20px; color: #e6f1f7;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px); /* cam efekti */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
transition: transform .25s ease, box-shadow .25s ease;
}
.kart:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 240, 168, 0.18);
}
.etiket {
font-size: 12px; letter-spacing: .1em; color: #00f0a8;
border: 1px solid #00f0a866; border-radius: 999px; padding: 2px 10px;
}
.kart h3 { margin: 14px 0 8px; font-size: 22px; }
.kart p { margin: 0 0 18px; color: #9fb1bf; line-height: 1.5; }
.buton {
display: inline-block; padding: 10px 16px; border-radius: 10px;
background: #00f0a8; color: #04110c; font-weight: 600; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.kart { transition: none; }
}
Not: backdrop-filter tüm güncel tarayıcılarda çalışır. Efektin görünmesi için kartın arkasında renkli bir zemin olmalı. Düz siyah zeminde cam efekti fark edilmez.
prefers-reduced-motion satırı, cihazında animasyonları kapatmış kullanıcılara saygı gösterir. Küçük ama profesyonel bir dokunuş.