SnippetUI
← Back to snippets

Kartu Glow Neon

Ini adalah komponen UI kartu interaktif yang tepi kartunya menyala seperti lampu neon saat diarahkan, dan sorotan bergerak bergantung pada posisi mouse.

HTMLCSSJavaScript

Pratinjau

Tiga kartu menonjol dengan latar belakang gelap, dan saat diarahkan, efek cahaya neon dan sorotan diaktifkan.

⚡

Lightning Fast

Muat secara instan dengan edge caching.

🛡️

Secure by Design

Aman dengan keamanan tanpa kepercayaan.

📊

Deep Analytics

Wawasan waktu nyata.

Kasus penggunaan dan fitur

  • Game/Dasbor/Produk Digital: Cocok untuk situs bertema gelap.

  • Variabel CSS plus JavaScript: Implementasi sederhana untuk memperbarui variabel --mx / --my dengan JavaScript.

  • Kontrol warna setiap kartu dengan variabel CSS: Ubah warna yang dipancarkan dengan mudah menggunakan variabel --glow.

Poin desain dan UX

  1. Kontrol posisi radial-gradient dengan posisi mouse: Dapatkan arah sorotan dengan menentukan posisi menggunakan variabel CSS, bukan background-position.

  2. opacity: 0 → 0.6 transisi: Cahaya memudar, sehingga gerakan melayang terlihat alami dan mulus.

  3. Peningkatan translateY(-8px): Efek membuat kartu tampak mengambang menekankan interaktivitas.

Cara menyesuaikan

Untuk mengubah warna cahaya, cukup ganti variabel --glow:


/* aksen merah muda */

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



/* aksen cyan */

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

Kode implementasi

<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">Muat secara instan dengan edge caching.</p>

  </div>

</div>

<!-- Struktur serupa untuk kartu lain -->

</div>



<style>
/* Detailnya sama dengan CSS di Pratinjau */

.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>

Status kompatibilitas peramban

| Peramban | Status kompatibilitas |

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

| Chrome 49+ | ✅ Sepenuhnya kompatibel |

| Firefox 31+ | ✅ Sepenuhnya kompatibel |

| Safari 9.1+ | ✅ Kompatibel |

| Tepi 79+ | ✅ Sepenuhnya kompatibel |