Share
En este tutorial veremos un juguete CSS emergente con el nombre de Filtro de fondo..
La propuesta de filtro de fondo está muy influenciada por el lenguaje de diseño de Apple, en particular que Frosty-transparent-blurry-background vistos en sus interfaces más recientes de iOS y macOS. Lo habrá notado en el Dock, el menú contextual y el centro de notificaciones..
Actualmente, el filtro de fondo está preparado bajo CSS Filters Level 2, y en el momento de la escritura, solo funciona en Safari 9 con -webkit- prefijo, y Chrome, así como Opera, habilitando las "Características experimentales de la plataforma web" bajo la cromo: // banderas menú.
El filtro de fondo se incluye como parte de la especificación de los Filtros CSS y, por lo tanto, de manera similar a la filtrar propiedad, hereda todas las funciones de filtrado familiares tales escala de grises (), difuminar(), y sepia(). La única diferencia aquí es que afectará a los elementos 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:
Establezca un fondo en el primer elemento con baja opacidad para que podamos agregar filtro de fondo con una función, por ejemplo, escala de grises () para convertir el telón de fondo en blanco y negro.
.filtro -webkit-backdrop-filter: blur (10px); / * Safari 9+ * / backdrop-filter: blur (10px); / * Chrome y Opera * / background-color: rgba (255, 255, 255, 0.3);
Observe en la siguiente demostración que los descendientes de la .filtrar Los elementos (un botón en este caso) permanecen nítidos a pesar de la difuminar() Además de la función. Esta es una ventaja filtro de fondo tiene sobre el filtrar propiedad; donde todos los descendientes son impactados.
Nota: imagen aquí tomada del tutorial Cómo crear una pequeña ilustración de cuento de hadas inspirada en la Caperucita Roja en Paint Tool SAI.
Combinar dos funciones de filtro en una sola declaración también es aceptable. Por ejemplo, manteniendo nuestra difuminar(), pero añadiendo el escala de grises () Función para despojar el telón de fondo de color..
.filtro -webkit-backdrop-filter: escala de grises () desenfoque (10px); / * Safari 9+ * / backdrop-filter: escala de grises () desenfoque (10px); / * Chrome y Opera * / background-color: rgba (255, 255, 255, 0.3);
Otras funciones que puede agregar a la mezcla incluyen:
Accentsconagua
brillo(): aceptando un número de 0 a infinito, o porcentaje. Cualquier numero abajo 1, p.ej. 0.8, oscurecerá el elemento, y especificando cualquier número arriba 1 aligerará el elemento.contraste(): acepta un número y porcentaje que funciona de forma similar a la brillo() Función, excepto que esta función define el elemento de contraste..invertir(): esta función genera los colores opuestos o negativos del fondo. Asimismo, la función también acepta un número y porcentaje como valor..Si no puede encontrar el efecto deseado de estas funciones predeterminadas, siempre puede agregar un filtro más avanzado a través de SVG. Cree un filtro SVG con una ID única y guárdelo en un .svg expediente:
Consulte el filtro con el url () función, como tal.
.filtro -webkit-backdrop-filter: url (… /images/filter.svg#morph); / * Safari 9 * / backdrop-filter: url (… /images/filter.svg#morph); / * Chrome y Opera * /
Desafortunadamente, añadiendo filtro con el url () La función no parece funcionar en ningún navegador en el momento presente. Pero una vez implementada correctamente, la imagen debería verse así..
Filtro personalizado con SVG. Hay una serie de implementaciones prácticas en la web donde podríamos aplicar filtros de fondo de una manera más significativa que solo ser una guarnición. Un buen ejemplo es Medio, que difumina la cubierta de la imagen de la publicación así como las imágenes dentro del contenido de la publicación antes de que la imagen se cargue por completo..
Imagen borrosa en Medium.comOtro gran ejemplo del mundo real es Facebook, que difumina las imágenes con contenido maduro, inapropiado o perturbador, antes de que los usuarios hayan dado su consentimiento para ver la imagen en su totalidad..
Facebook difumina una imagen violenta siguiendo la guía estándar de la comunidad de Facebook.A lo largo de los años, CSS se ha mejorado con nuevas especificaciones que permiten a los diseñadores crear interfaces más atractivas en la web. Las transformaciones, las transiciones y las animaciones han jugado su parte, y ahora los Filtros de fondo también están llegando en nuestro camino..
Aunque quizás sea demasiado pronto para usar el filtro de fondo en la producción, estas demostraciones muestran que pronto podremos aplicar efectos de filtro a los elementos de una manera más simplificada y, en última instancia, menos dependiente de las bibliotecas de JavaScript o Canvas pesadas. Hasta entonces, siga el blog de Webkit para obtener actualizaciones sobre este y otros proyectos..
