Mucho se ha hablado desde el año pasado sobre el glassmorfismo como una tendencia de diseño predominante en este 2021, si bien hay posiciones encontradas al respecto; debido a que algunos afirman que esta tendencia pone en peligro la accesibilidad, también hay quienes plantean a esta variante del neumorfismo como una tendencia imparable, que trae un renovado look and feel que crea la sensación o apariencia de que el usuario ve a través de un cristal.
Para lograr tal fin es necesario cuidar de tres aspectos muy importantes en los elementos:
1. Los bordes necesariamente deben ser claros y ligeros para reforzar ese efecto de vidrio esmerilado.
2. Los colores a utilizar de fondo deben ser vivos para resaltar la transparencia borrosa del contenedor y permitir la legibilidad del contenido.
3. El fondo del contenedor debe tener un efecto de desenfoque.
4. La sombra del elemento debe facilitar la identificación visual del mismo.
Ahora bien, para lograr ese efecto Css nos proporciona la propiedad Backdrop-filter que permite aplicar efectos gráficos como desenfoque o cambio de color a un área en concreto, es decir ésta propiedad solo se aplica a un contenedor sin que se vean afectados los elementos que están dentro del mismo, característica que marca una clara diferencia respecto a propiedades como filter, opacity o el resultado que podemos obtener al no especificar un fondo, configurarlo como semitransparente a través de rgba o aplicar una opacidad a todo el elemento.
Con backdrop-filter puedes aplicar efectos como:
- gray-scale()
- sepia()
- saturate()
- hue-rotate()
- invert()
- opacity()
- brightness()
- contrast()
- blur()
- drop-shadow() e incluso
- url() para filtros svg
Sin embargo para lograr este efecto del glassmorfismo solo es necesario usar blur() cuya función es aplicar un desenfoque gaussiano a la imagen de entrada. No obstante según Can I use esta propiedad aun no es compatible con todos los navegadores, razón por la que se recomienda usar la consulta @supports que te permitirá especificar declaraciones que dependen de la compatibilidad del navegador con backdrop-filter y con el cual podrás proporcionar un estilo completamente diferente al elemento para los navegadores que no lo admitan.
A fin de que puedas ver esta propiedad en acción te presento el siguiente ejemplo donde podrás ver todos los aspectos que te mencioné con anterioridad:
Top comments (0)