Introducción
Los filtros son una herramienta poderosa que los autores de la Web pueden usar para lograr efectos visuales interesantes. En este artículo, analizaremos la historia de los efectos de filtro, qué hacen y cómo usarlos. Abordaremos ejemplos de todos los filtros predefinidos para CSS con algunos ejemplos. También analizaremos las consideraciones de rendimiento para usarlos en computadoras y dispositivos móviles, ya que conocer el impacto en la velocidad de los filtros es importante para brindar una buena experiencia del usuario. Por último, revisaremos el estado actual de la implementación en los navegadores modernos.
El pasado, presente y futuro de los efectos de filtro
Los efectos de filtro se originaron como parte de la especificación de Gráficos vectoriales escalables (SVG). Se crearon para aplicar varios efectos de imagen basados en píxeles a un dibujo vectorial. Con el tiempo, a medida que los proveedores de navegadores agregan funciones SVG a sus navegadores, se hizo evidente la utilidad de los filtros. A Robert O’Callahan, de Mozilla, se le ocurrió la idea brillante de usar filtros SVG a través de la aplicación de CSS para el contenido HTML "normal". Roberto creó un prototipo de una primera versión que mostró lo poderosa que podría ser la combinación de filtros y el estilo de CSS. Los grupos de trabajo de CSS y SVG en el W3C decidieron armonizar el uso de filtros para HTML y SVG a través del estilo de CSS y, por lo tanto, nació la propiedad "filter" para CSS. En la actualidad, un grupo de trabajo conjunto de personas que trabajan en CSS y SVG está trabajando mucho para que los filtros sean universalmente útiles. Puede encontrar la especificación actual para todo esto aquí.
Una nueva vida para la propiedad "filter" de CSS
A veces, Deja Vu ataca a un desarrollador web cuando ve un "filtro" en los estilos CSS. Esto se debe al hecho de que las versiones anteriores de Internet Explorer tenían una propiedad de "filtro" expuesta a través de CSS para realizar algunas funciones específicas de la plataforma. Esta función dejó de estar disponible y se reemplazó por la propiedad estándar "filter" que ahora es parte de CSS3. Por lo tanto, si ves "filtrar" en realidad en algunas páginas web viejas, no hay necesidad de confundirse. Toda la acción se encuentra en la nueva propiedad "filter" y en las nuevas versiones de IE se implementa de la misma manera que en todos los navegadores modernos.
Cómo funcionan los filtros
¿Qué hace exactamente un filtro? La forma más fácil de pensar en un filtro es como un paso de procesamiento posterior que realiza una acción mágica después de que se haya diseñado y dibujado todo el contenido de la página.
Cuando un navegador carga una página web, necesita aplicar estilos, realizar el diseño y, luego, renderizar la página para que haya algo que observar. Los filtros aparecen después de todos esos pasos y justo antes de que la página se copie en la pantalla. Lo que hacen es tomar una instantánea de la página renderizada como una imagen de mapa de bits, luego aplicar una magia gráfica sobre los píxeles de la instantánea y luego dibujar el resultado sobre la imagen de la página original. Una forma de entenderlas es como un filtro colocado en la parte frontal del lente de una cámara. Lo que se ve a través del lente es el mundo exterior modificado por el efecto del filtro.
Por supuesto, esto significa que se consume tiempo al dibujar una página con filtros, pero usarlos correctamente tendrá un impacto mínimo en la velocidad de tu sitio.
Además, del mismo modo que puedes apilar varios filtros uno frente al otro en el lente de la cámara, puedes aplicar un número arbitrario de filtros uno tras otro para lograr todo tipo de efectos.
Filtros definidos mediante SVG y CSS
Dado que los filtros provienen originalmente de SVG, existen diferentes maneras de definirlos y usarlos. SVG tiene un elemento <filter> que incluye las definiciones de varios efectos de filtro mediante la sintaxis XML. El conjunto de filtros definidos por CSS aprovecha el mismo modelo de gráficos, pero son definiciones mucho más simples que son fáciles de usar en una hoja de estilo.
La mayoría de los filtros de CSS se pueden expresar en términos de filtros de SVG, y CSS también te permite hacer referencia a un filtro especificado en SVG si lo deseas. Los diseñadores de filtros de CSS se han esforzado mucho por facilitar la aplicación de un filtro a los autores de la Web, por lo que este artículo solo abarcará los filtros disponibles directamente en CSS, ignorando las definiciones de SVG por el momento.
Cómo aplicar un filtro CSS
Los filtros de CSS se realizan a través de la propiedad "filter" que se aplica a cualquier elemento visible en tu página web. Para un ejemplo muy sencillo, podrías escribir algo como
div { { % mixin filter: grayscale(100%); % } }
y eso haría que el contenido dentro de todos los elementos <div> de la página se volviera gris. Ideal para que tu página parezca una imagen de TV de la década de 1940.
La mayoría de los filtros toman alguna forma de parámetro para controlar cuánto se filtra. Por ejemplo, si quieres adaptar tu contenido para que esté a mitad de camino entre el color original y una versión en escala de grises, debes hacerlo de la siguiente manera:
div { { % mixin filter: grayscale(50%); % } }
Si quieres aplicar varios filtros diferentes uno tras otro, el proceso es sencillo: simplemente colócalos en orden en tu CSS de la siguiente manera:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
En ese ejemplo, primero se hará todo el color original en escala de grises y, luego, se aplicará un efecto sepia, que terminará luciendo de la siguiente manera:
Con la flexibilidad disponible para aplicar los filtros uno tras otro, se pueden lograr todo tipo de efectos: dependerá de tu imaginación experimentar para crear resultados asombrosos.
Qué filtros de efectos están disponibles con CSS
Por lo tanto, el mecanismo de filtro de SVG original es potente, pero al mismo tiempo puede resultar abrumador de usar. Por esta razón, CSS presenta varios efectos de filtro estándar que facilitan mucho su uso.
Analicemos cada una de ellas y veamos qué hacen.
- escala de grises(cantidad)
- Esto convierte el color de nuestra imagen de entrada en un tono de gris. El "importe" aplicado controla la cantidad de conversiones gris que se aplican. Si es 100%, todo tendrá un tono de gris. Si es 0%, los colores no se modifican. Si lo prefieres, puedes usar un número de punto flotante en lugar de porcentajes, es decir, 0 funciona igual que 0%, mientras que 1.0 funciona igual que 100%.
- sepia(importe)
- Esto les da un tono sepia a los colores que se pasan, como en fotografías antiguas. La "cantidad" aplicada funciona de la misma manera que para el filtro "escala de grises": es decir, el 100% hace que todos los colores se tomen completamente en tonos sepia y los valores más pequeños permiten aplicar el efecto en proporciones más pequeñas.
- saturate(cantidad)
- Con esta opción, se aplica un efecto de saturación de color a los colores para que se vean más intensos. Es un efecto genial que puede hacer que las fotos parezcan pósteres o dibujos animados.Con este efecto, también puedes usar un valor superior al 100% para enfatizar mucho la saturación. Definitivamente es un efecto que puede hacer que todo se vea muy bien.
- mat giratorio(ángulo)
- Este es un efecto geek de color que puede usarse para obtener resultados interesantes. Lo que hace es cambiar los colores para que una imagen de entrada se vea completamente diferente. Si puedes imaginar un espectro de colores que va del rojo al violeta alrededor de una rueda de color, este efecto toma el color original de la rueda como entrada y lo rota según el parámetro "angle" para producir el color de la rueda a la que rotó como el valor de color de salida. De esta manera, todos los colores de la imagen se desplazan en el mismo “ángulo” en la rueda. Esto es, por supuesto, una simplificación de lo que hace, pero esperamos que sea lo suficientemente parecido como para que tenga sentido.
- invertir(cantidad)
- Este efecto invierte los colores, de modo que, si la cantidad aplicada es del 100%, el resultado parece una foto negativa de las antiguas épocas de películas de las cámaras. Al igual que antes, el uso de valores inferiores al 100% aplicará progresivamente el efecto de inversión.
- opacidad(cantidad)
- Si quieres que el contenido que se filtra sea semitransparente, esta es la opción adecuada. El valor “cantidad” define qué tan opaco será el resultado. Entonces, un valor de 100% es completamente opaco, por lo que el resultado será exactamente el mismo que la entrada. A medida que el valor cae por debajo del 100%, la imagen de salida se volverá menos opaca (más transparente) y verás cada vez menos esa imagen. Esto significa que, si se superpone con otro elemento en la página, lo que está debajo comenzará a verse. Una “cantidad” del 0% significa que desaparecerá por completo, pero ten en cuenta que aún puedes hacer que los eventos, como los clics del mouse, etc., ocurran en objetos completamente transparentes. Esto es útil si deseas crear áreas en las que se puede hacer clic sin mostrar nada.
Esto funciona igual que la propiedad “opacidad” que ya conoces. En general, la propiedad “opacidad” de CSS no tiene aceleración de hardware, pero algunos navegadores que implementan filtros con aceleración de hardware acelerarán la versión del filtro de opacidad para obtener un rendimiento mucho mejor.
- brillo(cantidad)
- Es similar al control de brillo de tu TV. Ajusta los colores entre completamente negro y el color original en proporción al parámetro “amount”. Si la estableces en 0%, solo verás el color negro, pero a medida que el valor se acerque al 100%, se ilumina cada vez más la imagen original, hasta alcanzar el 100%, donde es igual a la imagen de entrada. Por supuesto, puedes seguir haciéndolo. Por lo tanto, establecer un valor del 200% hará que la imagen tenga el doble de brillo que la original. Es excelente para ajustar esas tomas con poca luz.
- contraste(cantidad)
- Más controles de la TV Esto ajustará la diferencia entre las partes más oscura y más clara de la imagen de entrada. Si usas 0%, el color negro es igual al de “brillo”, por lo que no es muy interesante. Sin embargo, a medida que aumentas el valor cerca del 100%, la diferencia en la oscuridad cambia hasta llegar al 100% y vuelve a ser la imagen original. También puedes superar el 100% para este efecto, lo que aumenta aún más la diferencia entre los colores claros y oscuros.
- desenfoque(radio)
- Si quieres que el contenido tenga bordes suaves, puedes desenfocarlos. Este luce como la vaselina clásica sobre una lámina de vidrio que solía ser una técnica popular de creación de películas. Mancha todos los colores y despliega su efecto, como cuando tus ojos están fuera de foco. El parámetro "radio" afecta la cantidad de píxeles de la pantalla que se combinan entre sí, de modo que un valor más grande creará más desenfoque. Por supuesto que nada deja la imagen sin cambios.
- drop-shadow(shadow)
- Es fantástico poder hacer que tu contenido parezca estar al sol, con una sombra en el suelo detrás y, por supuesto, eso es lo que hace “sombra paralela”. Toma una instantánea de la imagen, le aplica un solo color, la desenfoca y luego desvía el resultado un poco para que parezca una sombra del contenido original. El parámetro “shadow” que se pasa es un poco más complicado que un solo valor. Es una serie de valores separados por un espacio, y algunos valores también son opcionales. Los valores de "sombra" controlan la ubicación en la que se coloca la sombra, cuánto desenfoque se aplica, el color de la sombra, etc. Para obtener más detalles sobre lo que hacen los valores de "sombra", la especificación Fondos CSS3 define "box-sombra" con gran detalle. Los siguientes ejemplos deberían darte una buena idea de cuáles son las diversas posibilidades.
Esta es otra operación de filtro similar a la funcionalidad existente de CSS disponible a través de la propiedad “box-shadow”. Usar el enfoque de filtro significa que es posible que algunos navegadores aceleren el hardware, como se describió anteriormente en la operación de “opacidad”.
- URL que hace referencia a filtros de SVG
- Dado que los filtros se originaron como parte de SVG, es lógico que puedas darle estilo a tu contenido con un filtro de SVG. Esto es fácil con la propuesta actual de propiedad de "filtro". Todos los filtros en SVG se definen con un atributo 'id' [id] que se puede usar para hacer referencia al efecto de filtro. Por lo tanto, para usar cualquier filtro SVG de CSS, lo único que debes hacer es consultarlo con la sintaxis "url".
Por ejemplo, el lenguaje de marcado SVG para un filtro podría ser similar a lo siguiente:
<filter id="foo">...</filter>
y, luego, CSS, podrías hacer algo tan simple como:
div { { % mixin filter: url(#foo); % } }
y, ¡listo! Todos los elementos <div de tu documento tendrán el estilo de las definiciones de filtro SVG.
- personalizado (próximamente)
- Pronto habrá filtros personalizados. Aprovechan el poder de tu GPU de gráficos para usar un lenguaje de sombreado especial con el objetivo de crear efectos asombrosos limitados por tu propia imaginación. Esta parte de la especificación del "filtro" todavía se está debatiendo y se encuentra en proceso de desarrollo, pero tan pronto como comience a implementarse en un navegador cercano, nos aseguraremos de escribir más información sobre lo que es posible.
Consideraciones sobre el rendimiento
Un aspecto importante de todo desarrollador web es el rendimiento de sus páginas web o aplicaciones. Los filtros CSS son una herramienta poderosa para lograr efectos visuales, pero, al mismo tiempo, pueden tener un impacto en el rendimiento de tu sitio.
Es importante comprender lo que hacen y cómo esto afecta el rendimiento, especialmente si deseas que tu sitio funcione bien en dispositivos móviles si son compatibles con filtros CSS.
En primer lugar, no todos los filtros se crean de la misma manera. De hecho, la mayoría de los filtros se ejecutan rápidamente en cualquier plataforma y tienen un impacto muy pequeño en el rendimiento. Sin embargo, los filtros que difuminan cualquier tipo de desenfoque suelen ser más lentos que los otros. Por supuesto, esto significa “desenfoque” y “sombra paralela”, pero esto no significa que no debas usarlos, pero entender cómo funcionan podría ayudar.
Cuando haces un blur, se mezclan los colores de los píxeles alrededor del píxel de salida para generar un resultado desenfocado. Por lo tanto, si tu parámetro radius es 2, el filtro debe mirar 2 píxeles en cada dirección alrededor de cada píxel de salida para generar el color mixto. Esto sucede para cada píxel de salida, lo que significa que muchos cálculos se hacen más grandes cuando aumentas el radius. Dado que blur mira en todas las direcciones, duplicar el "radio" significa que debes mirar 4 veces más píxeles, de modo que, en realidad, es 4 veces más lento para cada duplicación de radius. El filtro drop-shadow contiene una blur como parte de su efecto, por lo que también se comporta como blur cuando cambias las partes radius y spread del parámetro shadow.
Con blur, no todo se pierde, ya que en algunas plataformas es posible usar la GPU para acelerarlo, pero no necesariamente estará disponible en todos los navegadores. Cuando tengas dudas, lo mejor es experimentar con el "radio" que brinda el efecto que deseas, luego intenta reducirlo tanto como sea posible y al mismo tiempo mantener un efecto visual aceptable. Este ajuste hará que los usuarios estén más satisfechos, en especial si utilizan su sitio desde un teléfono.
Si usas filtros basados en url que hacen referencia a filtros SVG, estos pueden contener cualquier efecto de filtro arbitrario. Ten en cuenta que también pueden ser lentos, así que asegúrate de saber qué hace el efecto de filtro y experimenta en un dispositivo móvil para asegurarte de que el rendimiento sea correcto.
Disponibilidad en navegadores modernos
En este momento, varios efectos filter de CSS están disponibles en navegadores basados en WebKit y Mozilla. Esperamos verlos pronto en Opera y en IE10. Dado que la especificación aún se encuentra en fase de desarrollo, algunos proveedores de navegadores han implementado esto a través de prefijos de proveedores. Por lo tanto, en WebKit, debes usar -webkit-filter. En Mozilla, deberás usar -moz-filter y presta atención a otras implementaciones del navegador a medida que aparecen.
No todos los navegadores serán compatibles con todos los efectos de filtro de inmediato, por lo que el kilometraje será distinto. Por el momento, el navegador Mozilla solo admite la función filter: url() (sin el prefijo del proveedor), ya que esa implementación es anterior a las demás funciones de efectos.
A continuación, resumimos los efectos de los filtros de CSS disponibles en los distintos navegadores con indicadores aproximados de rendimiento para cuando se implementen en software. Ten en cuenta que varios navegadores modernos están empezando a implementarlas en hardware (acelerado por GPU). Cuando se compilan mediante la compatibilidad con GPU, el rendimiento mejorará notablemente para los efectos más lentos. Como siempre, realizar pruebas en distintos navegadores es la mejor manera de evaluar el rendimiento.
| Efecto de filtro | Navegadores compatibles | Rendimiento |
|---|---|---|
| escala de grises | Chrome | muy rápida |
| sepia | Chrome | muy rápida |
| saturar | Chrome | muy rápida |
| rotación de tono | Chrome | Rápida |
| invertir | Chrome | muy rápida |
| opacidad | Chrome | puede ser lento |
| brillo | Chrome | Rápida |
| contraste | Chrome | Rápida |
| desenfocar | Chrome | Lento, a menos que sea acelerado |
| drop-shadow | Chrome | puede ser lento |
| url() | Chrome y Mozilla | Varía, de rápida a lenta |
Otros recursos útiles
Una increíble aplicación de pintura abstracta interactiva con filtros que te permite experimentar y compartir tus obras de arte Asegúrate de consultar la excelente página de filtro interactivo de Eric Bidelman Un excelente instructivo sobre filtros con ejemplos La especificación de borrador oficial de efectos de filtro de W3C 1.0 http://dev.w3.org/fxtf/filters/ Ejemplo IU creada con filtros