¡Acostúmbrate a escribir juntos! Este es el segundo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .
Hola Glass Mimic
El mimetismo de vidrio es un nuevo estilo en el mercado hoy en día y se está volviendo cada vez más popular.
El neumorfismo imita el material plástico extruido (textura irregular, que resalta la sensación de estratificación), este nuevo estilo visual presta más atención al uso del eje z del espacio vertical. Sus características más típicas son:
- Transparencia (utiliza un efecto de vidrio esmerilado con un fondo borroso);
- Los objetos flotan en el espacio, expresando un sentido de jerarquía a través de la relación contextual;
- Los colores vibrantes acentúan la transparencia borrosa;
- Sutil procesamiento de los bordes de los objetos translúcidos, con un borde delicado para expresar la textura del vidrio.
Estas características típicas de centrarse en una sensación de espacio significan que este estilo ayuda a los usuarios a establecer jerarquía y profundidad en la interfaz. Los usuarios pueden ver la relación jerárquica entre los objetos, qué capa está por encima de qué capa, al igual que el vidrio real en el espacio físico.
Debido a que parece vidrio, creo que el mejor nombre es: Glassmorphism
La historia del mimetismo del vidrio
La representación visual de fondos borrosos se introdujo ampliamente por primera vez en iOS 7 en 2013.
Este fue un cambio muy significativo, pero dado que el estado casi físico estaba cambiando rápidamente a plano en ese momento, toda la controversia giró en torno al cambio de fuentes sans-serif e íconos planos, el desenfoque del fondo no se vio afectado, pero la gente parece gustarle
Las tendencias continúan intensificándose
Apple ha reducido en gran medida el efecto de vidrio borroso en sus sistemas operativos móviles con el tiempo, pero recientemente agregó una textura borrosa transparente a MacOS Big Sur.
Mire esta ventana para ver cómo la parte de la foto de fondo que está oscurecida por la ventana aparece como una textura vítrea vagamente transparente. Coloqué la ventana en el centro del escritorio, resaltando donde se nota más el desenfoque del fondo.
Por supuesto, si no te gusta este estilo, puedes desactivar este efecto por completo en la configuración del sistema.
Casos en Dribbble
Al igual que con cualquier otra tendencia de interfaz de usuario, una vez que se ponga de moda, habrá mucho trabajo relacionado con Dribbble. El mimetismo del vidrio está comenzando lentamente ahora, y ya hay algunos ejemplos hermosos. Por supuesto, estos casos se ven bien, pero no son fáciles de aplicar a los productos en línea. En la pantalla real del teléfono móvil, es difícil para ellos cubrir el fondo de esta manera, porque las aplicaciones en el teléfono móvil son de pantalla completa.
Producción frontal de mimetismo de vidrio.
Establecer la transparencia de fondo correcta
.card {
color: rgba(255, 255, 255, 0.8);
position: absolute;
right: 100px;
bottom: 100px;
z-index: 10;
font-family: sans-serif;
text-align: center;
width: 300px;
height: 500px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.4);
background: linear-gradient(
to top right,
rgba(90, 149, 207, 0.5),
rgba(58, 76, 99, 0.8)
);
box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
-10px 10px 20px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px); /* 元素后面区域添加模糊效果 */
border-radius: 20px;
transform: rotate(-15deg);
}
复制代码El uso más importante backdrop-filter: blur(6px);es agregar un desenfoque al área detrás de un elemento.
Establecer un fondo adecuado
body {
height: 100vh;
background: radial-gradient(
circle at 60% 90%,
rgba(46, 103, 161, 1),
transparent 60%
),
radial-gradient(
circle at 20px 20px,
rgba(46, 103, 161, 0.8),
transparent 25%
),
#182336;
}
复制代码ajuste de detalle
Podemos intentar agregar un borde de 1px con transparencia a la capa transparente.
referencia
Glassmorphism en las interfaces de usuario
Lo anterior es todo el contenido de este artículo. Espero que este artículo sea útil para todos. También puede consultar mis artículos anteriores o intercambiar sus pensamientos y experiencias en el área de comentarios. Bienvenido a explorar la interfaz juntos.