Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Dos maneras de crear un efecto de vidrio esmerilado en CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial, te mostraré cómo crear un efecto de vidrio esmerilado en CSS. Ya habrás visto esto en acción en las interfaces de usuario de MacOS e iOS, incluso en Windows, por lo que definitivamente es un efecto en tendencia. Podemos emular el efecto de vidrio esmerilado en sitios web utilizando CSS, y en este tutorial te enseñaré dos maneras de hacerlo.

Efecto de vidrio esmerilado en CSS

Método 1

El primer método tiene un soporte de navegadores muy amplio, pero requiere más CSS que el segundo enfoque que veremos.

Empieza creando un div con una clase de .container. Utilizaremos esto para representar nuestro panel de vidrio esmerilado. Luego, aplica una imagen de fondo al elemento del cuerpo. A este fondo necesitarás aplicar:

Hacemos esto porque los elementos del cuerpo heredarán esta imagen de fondo y deseamos que conserve el mismo tamaño.

Ahora vamos a crear un pseudo elemento en nuestro .container, eso es lo que nos va a proporcionar el desenfoque. Luego, aplicamos lo siguiente:

Esto nos da un elemento que cubre el elemento contenedor. Ahora es momento de añadir un poco de color, por lo que utilizaremos box-shadow:

Y para dar un efecto esmerilado, añadiremos un filtro de desenfoque:

Esto nos proporciona la mayor parte de lo que deseamos, pero aún no está completo. Ahora necesitamos (como hemos explicado anteriormente) establecer un fondo heredado tanto para el pseudo elemento como para su "parent".

Con unos cuantos ajustes opcionales más, aquí está el resultado final:

Método 2

Para un método alternativo que utiliza un poco menos de estilo, pero que tiene un soporte para navegadores ligeramente menor. Empezamos con el mismo elemento .container y aplicamos la misma imagen de fondo de portada al elemento del cuerpo.

Luego, dirigimos nuestra atención a una propiedad de CSS llamada backdrop-filter. Empezamos añadiendo algunos estilos de presentación a nuestro contenedor, incluyendo un color de fondo que nos guste (vamos por un blanco pálido):

Luego, añadimos el filtro (es posible que necesites incluir el prefijo apropiado para tu navegador, o simplemente verifica el autorefixer si estás en Codepen).

¡Eso es! Experimenta con el valor de desenfoque para conseguir el efecto que quieras, pero no se necesitas nada más. Esto es lo que nos da:

Conclusión

La desventaja de utilizar el segundo de estos métodos es la falta de soporte para navegadores. En este momento existe soporte en Edge y Safari, pero eso es todo. Aun así, este efecto de vidrio esmerilado puede ser una forma muy agradable de mejorar las UI para los navegadores que sí lo admiten.

Enlaces útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.