Divirtiéndote con el CSS de Mañana: Filtros para Fondo

En éste tutorial veremos un juguete emergente de CSS que lleva el nombre de Backdrop Filter (Filtro para Fondo).

La propuesta del backdrop-filter es altamente influenciada por el lenguaje de diseño de Apple, particularmente ese fondo borroso transparente como hielo visto en sus más recientes interfaces de iOS y macOS. Lo habrás notado en el Dock, el Menú Contextual, y en el Centro de Notificaciones.

El filtro backdrop se está preparando actualmente bajo Filtros de CSS NIvel 2, y al momento de escribir éste tutorial, solo funciona en Safari 9 con el prefijo webkit-, y Chrome al igual Opera al habilitar las "Funciones Experimentales de Web Platform" bajo el menú chrome://flags.

Usando el Filtro para Fondo

El filtro Backdrop es incluído como parte de la especificación de Filtros CSS, y así, similarmente a la propiedad filter (filtro), hereda todas las funciones de filtrado familiares como grayscale(), blur(), y sepia(). La única diferencia aquí es que afectará a los elementos que se encuentran debajo del elemento seleccionado.

Para usarlo, necesitaremos al menos dos elementos; el primer elemento será el objetivo, mientras que el segundo estará debajo de él. Por ejemplo:

1

<div id="first-element" class="filter"></div>

2

<a id="second-element" href="https://example.com"><img src="images/name.jpg" alt=""></a>

Establecer un fondo en el primer elemento con la opacidad baja para que podamos agregar backdrop-filter con una función, por ejemplo, grayscale() para hacer el fondo blanco y negro.

1

.filter {

2

    -webkit-backdrop-filter: blur(10px); /* Safari 9+ */

3

    backdrop-filter: blur(10px); /* Chrome and Opera */

4

    background-color: rgba(255, 255, 255, 0.3);

5

}

Nota en el siguiente demo que descendientes de los elementos .filter (un botón en éste caso) siguen nítidos a pesar de la adición de la función blur(). Ésta es una ventaja de backdrop-filter sobre la propiedad filter; donde todos los descendientes son impactados.

Nota: la imagen aquí tomada del tutorial Cómo Crear una Ilustración en Paint Tool SAI Inspirada en el Cuento de Caperucita Roja.

Combinando Múltiples Filtros

Combinar dos funciones de filtro en una sola declaración también es aceptable. Por ejemplo, manteniendo nuestro blur(), pero agregando la función grayscale() para quitar el color en el fondo.

1

.filter {

2

    -webkit-backdrop-filter: grayscale() blur(10px); /* Safari 9+ */

3

    backdrop-filter: grayscale() blur(10px); /* Chrome and Opera */

4

    background-color: rgba(255, 255, 255, 0.3);

5

}

Otras funciones que puedes agregar a la mezcla incluyen:

• brightness() : aceptando un número de 0 a infinito, o porcentaje. Cualquier número inferior a 1, por ejemplo 0.8, oscurecerá el elemento, y especificando cualquier número superior a 1 aclarará el elemento.
• contrast() : acepta un número y porcentaje que funciona similar a la funcion brightness(), excepto que ésta función define el contraste del elemento.
• invert() : ésta función genera los colores opuestos o negativos del fondo. Asimismo, la función también acepta un número y porcentaje como valor.

Filtro Avanzado con SVG

Si no encuentras el efecto deseado de éstas funciones predeterminadas, siempre puedes agregar un filtro más avanzado mediante SVG. Crea un filtro SVG con un único ID, y guárdalo en un archivo .svg:

1

<filter id="morph">

2

<feMorphology id="morph-value" operator="erode" in="SourceGraphic" radius="3"/>

3

</filter>

Refiere el filtro con la función url(), así.

1

.filter {

2

    -webkit-backdrop-filter: url(../images/filter.svg#morph); /* Safari 9 */

3

    backdrop-filter: url(../images/filter.svg#morph); /* Chrome and Opera */

4

}

Desafortunadamente, agregar filtro con la función url() no parece funcionar en ningún navegador por el momento. Pero una vez que sea implementada, la imagen debería verse así.

¿Qué Crear?

Hay muchas implementaciones prácticas en la red donde pudiéramos aplicar filtros para fondo de una manera más significativa que solo ser un adorno. Un buen ejemplo es Medium, que desenfoca la imagen de la portada así como las imágenes dentro del contenido del artículo antes de que la imagen sea totalmente cargada.

Otro buen ejemplo del mundo real es Facebook, que desenfoca imágenes con contenido maduro, inapropiado o perturbador antes de que los usuarios hayan aceptado ver la imagen completa.

Conclusión

Con el paso de los años, CSS ha sido realzado con nuevas especificaciones que permiten a los diseñadores crear interfaces más atractivas en la red. Transformaciones, transiciones, y animaciones han jugado su papel, y ahora Filtros Backdrop están llegando también.

Aunque puede ser muy prematuro para usar el filtro backdrop en producción, éstos demos muestran que pronto podremos aplicar efectos de filtros a elementos de manera más simple y menos dependientes de librerías pesadas de JavaScript o Canvas. Hasta entonces, consulta el Blog de Webkit para actualizaciones sobre éste y otros proyectos.

Más Recursos

• Borrador del Filtro Backdrop: Borrador de W3C
• Soporte de Navegadores del Filtro Backdrop
• Ejemplos del Filtro Backdrop en CodePen