Tarjeta Glassmorphism con Efecto de Desenfoque
Un componente de tarjeta de interfaz moderna con diseño glassmorphism, que presenta un efecto de vidrio esmerilado con desenfoque de fondo y bordes sutiles.
Diseño Responsivo
Sí
Soporte para Modo Oscuro
Sí
líneas
82
Compatibilidad del Navegador
Chrome · Firefox · Safari · Edge
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Tarjeta Glassmorphism con Efecto de Desenfoque
Este componente de tarjeta implementa la tendencia de diseño glassmorphism, creando un efecto de vidrio esmerilado usando filtros de fondo y fondos semitransparentes. Es perfecto para interfaces modernas que quieren lograr un aspecto elegante y contemporáneo.
Características
- Diseño Glassmorphism: Efecto de vidrio esmerilado con desenfoque de fondo
- Fondos Semitransparentes: Colores RGBA para apariencia tipo vidrio
- Bordes Sutiles: Bordes ligeros para realzar el efecto de vidrio
- Animaciones Hover: Transiciones suaves y efecto de elevación al pasar el cursor
- Soporte Modo Oscuro: Se adapta al modo oscuro con colores apropiados
- Responsivo: Funciona en todos los tamaños de pantalla
Uso
Para usar esta tarjeta, incluye el HTML y CSS en tu proyecto. La clave para lograr el efecto de vidrio es usar backdrop-filter: blur() junto con colores de fondo semitransparentes. Ten en cuenta que los filtros de fondo pueden no estar soportados en todos los navegadores.
Personalización
Puedes personalizar los siguientes aspectos:
- Cantidad de Desenfoque: Ajusta el valor de
backdrop-filter: blur() - Transparencia: Modifica los valores alfa en los colores de fondo RGBA
- Bordes: Cambia los colores y anchos de los bordes
- Sombra: Ajusta los valores de box-shadow para diferentes efectos de profundidad
- Redondeo: Modifica border-radius para diferentes estilos de esquinas
- Efectos Hover: Personaliza los cambios de transformación y sombra al pasar el cursor
Compatibilidad del Navegador
Este componente usa CSS backdrop-filter, que está soportado en navegadores modernos. Para navegadores más antiguos, podrías necesitar proporcionar un fondo alternativo o usar un polyfill.
Consideraciones de Diseño
El glassmorphism puede ser visualmente atractivo pero puede impactar en la legibilidad. Asegúrate de que haya suficiente contraste entre el texto y el fondo. Además, ten cuidado con el rendimiento ya que los filtros de fondo pueden ser intensivos para la GPU.
HTML
5
líneas
CSS
77
líneas
<div class="glass-card">
<h3 class="card-title">Tarjeta Glass</h3>
<p class="card-content">Esta es una tarjeta moderna de glassmorphism con efecto de desenfoque de fondo. Crea una apariencia de vidrio esmerilado.</p>
<button class="card-btn">Aprende Más</button>
</div>
Compatibilidad del Navegador
Chrome
≥ 76
Firefox
≥ 70
Safari
≥ 14
Edge
≥ 79