SnippetUI
← Back to snippets

Sección de Tarjetas de Características

Sección de tarjeta de presentación de funciones para SaaS/páginas de destino. Un componente de interfaz de usuario de tarjeta con un borde de gradación que brilla suavemente cuando se coloca el cursor sobre ella.

HTMLCSS

Vista previa

Seis tarjetas de función están dispuestas en una cuadrícula y el borde de gradación se ilumina cuando se coloca el cursor sobre ella.

Features

todo esta aqui

⚡

procesamiento de alta velocidad

Respuesta en milisegundos.

🛡️

seguridad

Arquitectura de confianza cero.

📊

analítica

Información en tiempo real.

🤝

colaboración

Perfectamente juntos como un equipo.

🌍

mundial

Disponible en 148 países de todo el mundo.

🔧

personalización

Personalizable para adaptarse a su marca.

Casos de uso y características

  • SaaS/Página de destino: una sección de introducción de funciones que transmite claramente el atractivo del producto.

  • No se requiere JavaScript: implementación de CSS puro que incluye efectos de desplazamiento.

  • Código de color por tarjeta usando variables CSS: Administre de forma centralizada el color del borde de cada tarjeta usando la variable --card-color.

  • Efecto de borde mask-composite: el borde degradado aparece claramente al pasar el mouse.

Puntos de diseño y UX

  1. Comunicación visual con íconos: Los íconos transmiten instantáneamente el contenido de cada tarjeta.

  2. translateY(-4px) lift-up: Una exquisita sensación de volumen que no es demasiado profunda pero que flota ligeramente.

  3. opacity: 0 → 1 borde: El borde que aparece por primera vez al pasar el mouse crea una experiencia sorpresa.

Cómo personalizar

Cambiar el número de tarjetas: Simplemente agregue/elimine elementos .feat-card en feat-grid.

cambiar el color del borde:


.feat-c1 { --card-color: #f97316; } /* naranja */

Corregir el número de columnas de la cuadrícula.:


.feat-grid { grid-template-columns: repeat(3, 1fr); }

Código de implementación

<section class="feat-section">

<div class="feat-header">

  <div class="feat-eyebrow">Features</div>

  <h2 class="feat-title">todo esta aqui</h2>

</div>

<div class="feat-grid">

  <div class="feat-card feat-c1">

    <span class="feat-icon">⚡</span>

    <h3 class="feat-card-title">procesamiento de alta velocidad</h3>

    <p class="feat-card-desc">Respuesta en milisegundos.</p>

  </div>

  <div class="feat-card feat-c2">

    <span class="feat-icon">🛡️</span>

    <h3 class="feat-card-title">seguridad</h3>

    <p class="feat-card-desc">Arquitectura de confianza cero.</p>

  </div>

  <div class="feat-card feat-c3">

    <span class="feat-icon">📊</span>

    <h3 class="feat-card-title">analítica</h3>

    <p class="feat-card-desc">Información en tiempo real.</p>

  </div>

  <div class="feat-card feat-c4">

    <span class="feat-icon">🤝</span>

    <h3 class="feat-card-title">colaboración</h3>

    <p class="feat-card-desc">Perfectamente juntos como un equipo.</p>

  </div>

  <div class="feat-card feat-c5">

    <span class="feat-icon">🌍</span>

    <h3 class="feat-card-title">mundial</h3>

    <p class="feat-card-desc">Disponible en 148 países de todo el mundo.</p>

  </div>

  <div class="feat-card feat-c6">

    <span class="feat-icon">🔧</span>

    <h3 class="feat-card-title">personalización</h3>

    <p class="feat-card-desc">Personalizable para adaptarse a su marca.</p>

  </div>

</div>

</section>



<style>
.feat-section {

padding: 4rem 1rem;

font-family: system-ui, -apple-system, sans-serif;

color: white;

background: #0f172a;

box-sizing: border-box;

width: 100%;

}

.feat-section * { box-sizing: border-box; }

.feat-header {

text-align: center;

margin-bottom: 3rem;

}

.feat-eyebrow {

color: #6366f1;

font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

margin-bottom: 0.5rem;

}

.feat-title {

font-size: 2.5rem;

font-weight: 800;

margin: 0;

}

.feat-grid {

display: grid;

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

gap: 1.5rem;

max-width: 1000px;

margin: 0 auto;

}

.feat-card {

position: relative;

background: rgba(255, 255, 255, 0.03);

border-radius: 1rem;

padding: 2rem;

text-align: center;

transition: transform 0.3s ease;

z-index: 1;

}

.feat-card::before {

content: '';

position: absolute;

inset: 0;

border-radius: inherit;

padding: 2px;

background: linear-gradient(135deg, var(--card-color, #6366f1), transparent);

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

opacity: 0;

transition: opacity 0.3s ease;

z-index: -1;

}

.feat-card:hover {

transform: translateY(-4px);

}

.feat-card:hover::before {

opacity: 1;

}

.feat-icon {

font-size: 2.5rem;

display: block;

margin-bottom: 1rem;

}

.feat-card-title {

font-size: 1.25rem;

font-weight: 600;

margin: 0 0 0.5rem;

}

.feat-card-desc {

color: #9ca3af;

margin: 0;

line-height: 1.5;

}



.feat-c1 { --card-color: #f97316; }

.feat-c2 { --card-color: #3b82f6; }

.feat-c3 { --card-color: #10b981; }

.feat-c4 { --card-color: #8b5cf6; }

.feat-c5 { --card-color: #ec4899; }

.feat-c6 { --card-color: #06b6d4; }
</style>

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

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

| Cromo 80+ | ✅ Totalmente compatible |

| Firefox 99+ | ✅ Totalmente compatible |

| Safari 15.4+ | ✅Compatibles |

| Borde 80+ | ✅ Totalmente compatible |