SnippetUI
← Back to snippets

Tarjeta con Brillo de Neón

Este es un componente de interfaz de usuario de tarjeta interactiva donde el borde de la tarjeta se ilumina como una luz de neón cuando se pasa por alto y el foco se mueve según la posición del mouse.

HTMLCSSJavaScript

Vista previa

Tres cartas se destacan sobre un fondo oscuro y, cuando se pasa por alto, se activa un brillo de neón y un efecto de foco.

⚡

Lightning Fast

Cargue instantáneamente con almacenamiento en caché perimetral.

🛡️

Secure by Design

Seguro con seguridad de confianza cero.

📊

Deep Analytics

Información en tiempo real.

Casos de uso y características

  • Juegos/Paneles/Productos digitales: Adecuado para sitios con temas oscuros.

  • variables CSS más JavaScript: una implementación simple para actualizar las variables --mx / --my con JavaScript.

  • Controla el color de cada tarjeta con variables CSS: cambia fácilmente el color de emisión con la variable --glow.

Puntos de diseño y UX

  1. Controle la posición de “gradiente radial” con la posición del mouse: Logre la direccionalidad del foco especificando la posición con una variable CSS en lugar de “posición de fondo”.

  2. opacidad: 0 → 0.6 transición: El brillo se desvanece, por lo que el desplazamiento es natural y suave.

  3. translateY(-8px) lift-up: El efecto de hacer que las tarjetas parezcan flotantes enfatiza la interactividad.

Cómo personalizar

Para cambiar el color del brillo, simplemente anule la variable --glow:


/* acento rosa */

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



/* acento cian */

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

Código de implementación

<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">Cargue instantáneamente con almacenamiento en caché perimetral.</p>

  </div>

</div>

<!-- Estructura similar para otras tarjetas. -->

</div>



<style>
/* Los detalles son los mismos que CSS en Vista previa */

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

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

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

| Cromo 49+ | ✅ Totalmente compatible |

| Firefox 31+ | ✅ Totalmente compatible |

| Safari 9.1+ | ✅Compatibles |

| Borde 79+ | ✅ Totalmente compatible |