Cómo crear un efecto de vidrio esmerilado

El vidrio esmerilado y los efectos translúcidos se han vuelto bastante populares desde la llegada de la animación en el diseño web. Estos efectos, cuando se combinan con animación y funciones de tipo paralaje, añaden profundidad a las páginas, dándoles una cualidad casi 3D. A continuación destacamos algunos de los efectos que pueden lograrse usando una combinación de color, opacidad y filtros de fondo. Hemos mostrado los efectos superponiendo cajas con distintos grados de opacidad, color y filtros sobre imágenes ‘fijas en ventana’. También funcionarían igual de bien si las cajas fueran elementos animados que se deslizan sobre otros contenidos de la página al desplazarse.

Varias imágenes fijas en ventana

En el ejemplo siguiente, varios elementos se combinaron en un bloque de diseño, cada uno usando la MISMA imagen y todos fijados en ventana. El propio bloque de diseño tiene una imagen de fondo, fija en ventana y con un filtro de desenfoque de fondo aplicado a 4x. Después se añadió una caja con relleno de imagen, esquinas redondeadas y un borde blanco. De nuevo, la imagen estaba fija en ventana, pero esta vez sin filtro de fondo aplicado. Luego añadimos la caja translúcida para cubrir aproximadamente el 50% de la caja de contorno. Esta caja no tiene relleno, pero tiene un filtro de desenfoque de fondo aplicado a 8x. Por último, se añadió el texto ‘Esmerilado’ sobre la caja translúcida. Al texto se le aplicó el efecto ‘Recortar al texto’, usando la misma imagen que todos los demás elementos. Nuevamente, la imagen se configuró como fija en ventana. El texto blanco es simplemente una caja de texto normal añadida encima de todo el bloque de diseño. El resultado final da la sensación de una única imagen con distintos grados de desenfoque aplicados, mientras que la palabra ‘Esmerilado’ parece estar grabada en un panel de vidrio esmerilado, permitiendo que la imagen subyacente se vea con total nitidez.