Extensión de morfismo de vidrio Elementor libre: efecto de vidrio esmerilado en un solo cambio
Glassmorphism es el aspecto de vidrio esmerilado: un panel semitransparente que difumina todo lo que hay detrás de él. La extensión gratuita Glassmorphism en Master Addons lo agrega a la pestaña Avanzado de cualquier widget, columna, sección o contenedor de Elementor. Enciéndelo, configura el color de fondo borroso y transparente, alrededor de las esquinas, y el elemento se convierte en una tarjeta de vidrio. Se adapta a superposiciones de héroes, tarjetas de precios, testimonios y encabezados adhesivos.
Controles de desenfoque y tinte de vidrio
El valor de desenfoque va de 0 a 100 px y comienza en 20 px. El color de fondo establece el tinte del vidrio: elija un color RGBA y reduzca su opacidad para que el contenido detrás aún se muestre. Border Radius rodea las esquinas en px, % o em, y Border Width agrega un borde blanco delgado y semitransparente de hasta 10px.
- Valor borroso de 0 a 100px, 20px de forma predeterminada.
- Color de fondo RGBA para el tinte. Un color HEX o RGB se convierte en un 30% de opacidad para usted.
- Radio del borde por esquina, más un borde de vidrio de 0 a 10 px.
Corrija el desbordamiento cuando el desenfoque no se muestre
El desenfoque proviene de la propiedad de filtro de fondo CSS y el desbordamiento: oculto es la razón más común por la que desaparece. El interruptor Fix Overflow configura el desbordamiento del elemento como visible, para que pueda solucionarlo sin abrir una hoja de estilo.
- Un interruptor en el panel Glassmorphism, sin CSS personalizado.
- Úselo cuando el efecto esté activado pero nada parezca borroso.
- Compruebe también que el elemento se asiente sobre una fotografía, un degradado u otro fondo ocupado. Sobre blanco liso no hay nada que difuminar.
Glassmorphism CSS frente a la extensión Glassmorphism
Los filtros CSS de Elementor desdibujan el elemento en sí, incluido el texto. En su lugar, una tarjeta de vidrio necesita un filtro de fondo, que desdibuja solo lo que se encuentra detrás del elemento y Elementor no tiene control sobre él. Escrito a mano, el CSS se ve así:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| Css escrito a mano | Extensión del morfismo de vidrio | |
|---|---|---|
| Donde lo configuraste | Un campo CSS personalizado o su hoja de estilo | Controles en la pestaña Avanzado |
| Prefijo safari | Agregue usted mismo -webkit-backdrop-filter | Incluido |
| Colores HEX o RGB | Manténgase sólido a menos que agregue opacidad | Convertido al 30% de opacidad |
| Desenfoque bloqueado por desbordamiento: oculto | Encuéntrelo y anúdalo usted mismo | Arreglar el interruptor de desbordamiento |
| Trabaja en | Cualquiera que sea el objetivo de su selector | Widgets, columnas, secciones y contenedores |
el filtro de fondo funciona en Chrome, Edge, Safari y Firefox actuales. Los navegadores más antiguos muestran el fondo semitransparente sin desenfoque. El vidrio se ve mejor por encima del movimiento o el color, así que pruébalo encima Partículas o un Fondo de gradiente animado (Pro). Para efectos que el panel no cubre, agregue sus propias reglas con Css personalizado.
Preguntas frecuentes sobre el morfismo del vidrio
¿por qué no se muestra mi efecto borroso?
Active Fix Overflow en el panel Glassmorphism. Establece el desbordamiento del elemento en visible para que el filtro de fondo pueda funcionar. También asegúrese de que haya una imagen o un fondo colorido detrás del elemento.
¿Puedo utilizar colores sólidos con efecto vidrio?
Sí. Un color HEX o RGB se convierte a RGBA con un 30% de opacidad, por lo que el vidrio permanece transparente. Para un control exacto, elija un color RGBA y configure la opacidad usted mismo.
¿Funciona con algún tema?
Sí. El efecto se establece en los elementos de Elementor, por lo que funciona con cualquier tema que ejecute Elementor. Los visitantes necesitan un navegador que admita el filtro de fondo, que cubre las versiones actuales de Chrome, Edge, Safari y Firefox.
¿la extensión Glassmorphism es gratuita?
Sí. Glassmorphism es una de las extensiones gratuitas en Master Addons para Elementor. Actívelo en el panel de complementos maestros y aparecerá en la pestaña Avanzado de cada elemento.
Explore más funciones para construir más rápido y diseñar de forma más inteligente
¿por qué detenerse en un efecto? La suite Master Addons ofrece todo lo que necesita: widgets únicos, personalización más profunda y herramientas especializadas que funcionan juntas a la perfección. Convierte a Elementor en tu potencia de diseño definitiva.
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
Barra de progreso de lectura
