SnippetUI
← Back to snippets

Neon Glow Kart

Bu, kartın kenarının üzerine gelindiğinde neon ışık gibi yandığı ve spot ışığının fare konumuna bağlı olarak hareket ettiği etkileşimli bir kart kullanıcı arayüzü bileşenidir.

HTMLCSSJavaScript

Önizleme

Karanlık bir arka planda üç kart öne çıkıyor ve üzerine gelindiğinde bir neon parıltısı ve spot ışığı efekti etkinleştiriliyor.

⚡

Lightning Fast

Edge önbelleğe alma özelliğiyle anında yükleyin.

🛡️

Secure by Design

Sıfır güven güvenliğiyle güvende.

📊

Deep Analytics

Gerçek zamanlı bilgiler.

Kullanım durumları ve özellikleri

  • Oyunlar/Kontrol Panelleri/Dijital Ürünler: Koyu temalı siteler için uygundur.

  • CSS değişkenleri artı JavaScript: --mx / --my değişkenlerini JavaScript ile güncellemek için basit bir uygulama.

  • Her kartın rengini CSS değişkenleriyle kontrol edin: Yayılan rengi “—glow” değişkeniyle kolayca değiştirin.

Tasarım ve kullanıcı deneyiminin önemli noktaları

  1. ‘Radyal-gradyan’ın konumunu farenin konumuyla kontrol edin: Konumu ‘background-position’ yerine bir CSS değişkeniyle belirterek spot ışığı yönlülüğü elde edin.

  2. opaklık: 0 → 0,6 geçiş: Parıltı yavaş yavaş kaybolur, böylece vurgu doğal ve pürüzsüz olur.

  3. translateY(-8px) lift-up: Kartların kayan görünmesini sağlama etkisi etkileşimi vurgular.

Nasıl kişiselleştirilir

Işıma rengini değiştirmek için --glow değişkenini geçersiz kılmanız yeterlidir:


/* pembe vurgu */

.neon-card { --glow: #ec4899; }



/* camgöbeği vurgusu */

.neon-card { --glow: #06b6d4; }

Uygulama kodu

<div class="neon-cards-grid">

<div class="neon-card neon-card-1">

  <div class="neon-card-content">

    <div class="neon-card-icon">⚡</div>

    <h3 class="neon-card-title">Lightning Fast</h3>

    <p class="neon-card-desc">Edge önbelleğe alma özelliğiyle anında yükleyin.</p>

  </div>

</div>

<!-- Diğer kartlar için benzer yapı -->

</div>



<style>
/* Ayrıntılar Önizlemedeki CSS ile aynıdır */

.neon-cards-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;

}



.neon-card {

--glow: #6366f1;

position: relative;

background: #111;

border-radius: 16px;

padding: 2px;

cursor: pointer;

transition: transform 0.3s ease;

overflow: hidden;

}



.neon-card::before {

content: "";

position: absolute;

inset: 0;

background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 40%);

opacity: 0;

transition: opacity 0.3s ease;

}



.neon-card:hover {

transform: translateY(-8px);

}

.neon-card:hover::before {

opacity: 0.6;

}



.neon-card-content {

position: relative;

background: #111;

border-radius: 14px;

padding: 2rem;

height: 100%;

z-index: 1;

}



.neon-card-1 { --glow: #ec4899; }

.neon-card-2 { --glow: #06b6d4; }

.neon-card-3 { --glow: #8b5cf6; }
</style>



<script>

(function() {

document.querySelectorAll('.neon-card').forEach(function(card) {

  card.addEventListener('mousemove', function(e) {

    var rect = card.getBoundingClientRect();

    card.style.setProperty('--mx', ((e.clientX-rect.left)/rect.width*100)+'%');

    card.style.setProperty('--my', ((e.clientY-rect.top)/rect.height*100)+'%');

  });

});

})();

</script>

Tarayıcı uyumluluk durumu

| Tarayıcı | Uyumluluk durumu |

|----------|----------|

| Krom 49+ | ✅ Tamamen uyumlu |

| Firefox 31+ | ✅ Tamamen uyumlu |

| Safari 9.1+ | ✅ Uyumlu |

| Kenar 79+ | ✅ Tamamen uyumlu |